高德地图开发之地图配置及vue上初始化创建地图

news2025/1/18 13:55:06

开门见山地说，现如今地图相关的开发业务在工作中越来越常见，目前市面上主流的地图开发还是以百度和高德为主，今天就来讲一下高德地图的配置和在vue上的初始化创建，帮助大家更好更快的了解高德地图开发相关的内容。

一. 注册地图
无论是高德地图开发还是百度地图开发，第一步都要先在其管理平台上注册申请使用，我们以高德地图开发为例。先登录高德开放平台，网址链接：高德开放平台。
在这里插入图片描述

在右上角点击注册或者登录账号，因为高德地图是阿里系的，目前暂不支持微信登录，但能使用支付宝登录。登录成功后点击右上角的“控制台”进入高德控制台。下一步在左侧菜单“应用管理”中点击“我的应用”。
在这里插入图片描述

点击右侧“创建新应用”，填写表单后会生成一个新应用，在新应用右边点击“添加”，填写其中表单信息，服务平台此次为演示用选择“Web端(JS API)”，最后提交就能生成可用的地图应用配置了。
在这里插入图片描述

配置好后要注意上面的key和安全密钥，这是后续在程序中初始化地图主要用到的两个身份认证信息。

二. 在vue中创建一个新高德地图
在高德控制台配置好地图后，就可以在vue中去创建一个地图了，先用NPM 方式安装使用 Loader，运行下面的命令：

npm i @amap/amap-jsapi-loader --save

然后在全局中设置地图的安全密钥，安全密钥的值就是之前在高德控制台里注册好的安全密钥，加入以下代码：

// 设置安全密钥
window._AMapSecurityConfig = {
  securityJsCode: ''
}

在需要展示地图的界面中创建 div 标签作为地图容器，并设置地图容器的 id：

<template>
     <div id="gao-de-map" style="height: 700px;width: 100%"></div>
</template>

在需要展示地图的界面中引入 amap-jsapi-loader

import AMapLoader from '@amap/amap-jsapi-loader';

声明map对象

data(){
      return{
        map:null,
     } 
 },

创建地图初始化函数 initMap，并在mounted中调用地图初始化函数，其中initMap里的key是高德工作台中配置的key

mounted() {
    this.initMap()
  },
methods:{
    initMap(){
        AMapLoader.load({
            key:"",             // 申请好的Web端开发者Key，首次调用 load 时必填
            version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins:[''],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap)=>{
            this.map = new AMap.Map("gao-de-map",{  //设置地图容器id
                viewMode:"2D",    //是否为3D地图模式
                zoom:13,           //初始化地图级别
                center:[116.397428, 39.90923], //初始化地图中心点位置（北京）
            });
        }).catch(e=>{
            console.log(e);
        })
    },
},

最后就能在网页上看到生成的地图了。
在这里插入图片描述

三. 在地图左下角加比例尺，右下角加放大缩小和方向盘
在初始化函数 initMap中初始化地图的时候加入三个插件：

initMap(){
        AMapLoader.load({
            key:"",             // 申请好的Web端开发者Key，首次调用 load 时必填
            version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins:['AMap.Scale',
          'AMap.ToolBar',
          'AMap.ControlBar'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap)=>{
            this.map = new AMap.Map("gao-de-map",{  //设置地图容器id
                viewMode:"2D",    //是否为3D地图模式
                zoom:13,           //初始化地图级别
                center:[116.397428, 39.90923], //初始化地图中心点位置（北京）
            });

        this.map.addControl(new AMap.Scale()) // 添加左下角的比例尺
          let toolBar = new AMap.ToolBar({
            position: {
              bottom: '20px',
              right: '35px'
            }
          })
          let controlBar = new AMap.ControlBar({
            position: {
              bottom: '100px',
              right: '10px'
            }
          })
          this.map.addControl(toolBar) // 添加右下角的放大缩小
          this.map.addControl(controlBar) // 方向盘
        }).catch(e=>{
            console.log(e);
        })
    }