开门见山地说，现如今地图相关的开发业务在工作中越来越常见，目前市面上主流的地图开发还是以百度和高德为主，今天就来讲一下高德地图的配置和在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);
})
}
然后在地图的左下角和右下角就有对应的插件了。
总结：以上就是高德地图开发中关于地图的配置及在vue上初始化创建地图的步骤，希望能够帮到大家，谢谢！