近期在用vue做一个环保类的项目，要求使用高德地图。原生js api官方案例比较多，对于新手友好，但是在vue项目中加载是一个难以解决的问题。而专门为vue使用高德地图诞生的 vue-AMap 组件听起来很美好，但由于需要学习高德原生语法和vue-AMap语法，再加之该组件的文档和示例太少，用起来非常糟糕。
那么我们如何既能使用原生api，又能解决加载问题呢？
AMapJS, 一款基于AMap高德地图构建的API加载器
尽管这个东西不是为vue解决高德地图加载而专门开发的加载器，但是，它成功的被我运用到了项目中，所以，今日份推荐给你。
文档地址
贴一张图，方便下方的阅读。
安装
通过 npm 安装
npm i amap-js -S
引入
import AMapJS from 'amap-js'
使用（入口函数）
mounted() {
this.$nextTick(() => {
// dom 挂载完毕，再加载地图
this.entry()
})
},
methods: {
// 地图加载的入口函数
async entry() {
// 创建 AMapJSAPI loader
this.amapLoader = new AMapJS.AMapLoader({
// 高德地图的key
key: 'your key',
version: '1.4.15',
plugins: []
})
// 创建AMapUI Loader
this.amapuiLoader = new AMapJS.AMapUILoader({
version: '1.1'
})
// 加载基础的js api，加载DistrictLayer插件，加载UI
if (
(await this.amapLoader.load()) &&
(await this.amapLoader.loadPlugin(['AMap.DistrictLayer'])) &&
(await this.amapuiLoader.load())
) {
const { AMap } = this.amapLoader
// 使用data 中的 AMap 保存，全局使用
this.AMap = AMap
// UI控件加载
const [BasicControl] = await this.amapuiLoader.loadUI([
'control/BasicControl'
])
// 保存到 data，全局使用
this.BasicControl = BasicControl
// 构建地图容器
this.map = new this.AMap.Map('map', {
zoom: 9,
center: [112, 33.1],
// 设置地图样式（比较具有简约美的风格）
mapStyle: 'amap://styles/fresh'
})
// 绘制行政区域，挂载到地图上
this.map.add(this.disProvince())
// 加载图层、缩放UI控件的函数
this.loadUi()
}
return true
}
UI加载：示例为 加载图层、缩放控件函数
高德官方该控件的使用，点击快速跳转
// 图层、缩放控件加载
async loadUi() {
// 如果不存在这两个UI控件就创建
if (!this.bz && !this.bl) {
// 使用 bz，data保存了一下缩放UI控件
this.bz = new this.BasicControl.Zoom({
position: {
top: this.ctrlTop + 'px',
right: this.ctrlRight
}
})
// data保存图层切换UI控件
this.bl = new this.BasicControl.LayerSwitcher({
position: {
top: this.ctrlTop + 90 + 'px',
right: this.ctrlRight
}
})
}
// 缩放控件挂到地图上
this.map.addControl(this.bz)
// 图层切换控件挂到地图上
this.map.addControl(this.bl)
}
插件加载： 示例为 加载简易行政区
高德官方该插件的使用，点击快速跳转
// 绘制行政区的函数
disProvince() {
return new this.AMap.DistrictLayer.Province({
zIndex: 10,
// 展示的区域 ------------------------------------行政区码注意修改
adcode: ['411***'],
// 确定展示的等级（1的话，只展示市，2展示县区）
depth: 2,
styles: {
//行政区要填充的颜色
fill: (area) => {
var adcode = area.adcode
// 调用颜色函数
return this.getColorByAdcode(adcode)
},
'province-stroke': 'cornflowerblue',
'city-stroke': 'white', // 中国地级市边界
'county-stroke': 'rgba(255,255,255,0.5)' // 中国区县边界
}
})
},
/* 颜色赋值函数 该函数阅读起来有一点晦涩,大致意思就是要渲染的行政区码，作为一个属性
如果该 colors[adcode] 不存在，我们就取一个颜色，为其放里边,然后赋值给当前行政区要渲染的 fill 填充颜色中。
如此一来，也就是说，要渲染的行政区必然有颜色,不渲染的行政区，自然也就没有颜色
data中高亮行政区域颜色存放变量,colors: {}
参数: 行政区码 adcode
*/
getColorByAdcode(adcode) {
if (!this.colors[adcode]) {
var gb = Math.random() * 155 + 50
this.colors[adcode] = 'rgba(' + gb + ',' + gb + ',255, 0.5)'
}
// 返回行政区的填充颜色
return this.colors[adcode]
}
因为vue独特的加载方式，再加之新手对于高德地图api和AMapJS的不熟悉，结合我个人的使用经验，这里我再整理一下。
下边的内容请结合上文阅读。
// 创建 AMapJSAPI loader
this.amapLoader = new AMapJS.AMapLoader({
// 高德地图的key
key: 'your key',
version: '1.4.15',
plugins: []
})
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
await this.amapLoader.load()
const { AMap } = this.amapLoader
// 使用data 中的 AMap 保存，全局使用
this.AMap = AMap
// 构建地图容器
this.map = new this.AMap.Map('map', {
zoom: 9,
center: [112, 33.1],
// 设置地图样式（比较具有简约美的风格）
mapStyle: 'amap://styles/fresh'
})
// 创建AMapUI Loader
this.amapuiLoader = new AMapJS.AMapUILoader({
version: '1.1'
})
<script src="//webapi.amap.com/ui/1.1/main.js"></script>
await this.amapuiLoader.load()
// UI控件加载
const [BasicControl] = await this.amapuiLoader.loadUI([
'control/BasicControl'
])
// 保存到 data，全局使用
this.BasicControl = BasicControl
this.bz = new this.BasicControl.Zoom({
position: {
top: this.ctrlTop + 'px',
right: this.ctrlRight
}
})
// 缩放控件挂到地图上
this.map.addControl(this.bz)
await this.amapLoader.loadPlugin(['AMap.DistrictLayer'])
// 绘制行政区的函数
disProvince() {
return new this.AMap.DistrictLayer.Province({...})
}
this.map.add(this.disProvince())
到此，高德中最常用的三个地方已经介绍的非常详细了。
不得已必须要使用高德地图做这个项目，自己因此也不得已必须要去研究它，前前后后在地图加载上都搞了很多天，也查阅了太多的网络资料，自己精神几度濒临崩溃，幸运的是，在自己的不懈摸索下终于成功实现了自己的需求。
为了各位能够更快的在vue项目中使用高德地图，也为了记录，因此，十分认真的写下了这篇博客。
个人以为，这篇文章可以说是全 csdn 中介绍 vue 使用 高德地图最详细的文章了，尽管疏漏颇多，但是经历了实践的磨练，可以拿去一试了！
非常感谢您的阅读，求赞！