vue项目中引入高德地图

近期在用vue做一个环保类的项目，要求使用高德地图。原生js api官方案例比较多，对于新手友好，但是在vue项目中加载是一个难以解决的问题。而专门为vue使用高德地图诞生的 vue-AMap 组件听起来很美好，但由于需要学习高德原生语法和vue-AMap语法，再加之该组件的文档和示例太少，用起来非常糟糕。
那么我们如何既能使用原生api，又能解决加载问题呢？

1.大大的推荐

AMapJS, 一款基于AMap高德地图构建的API加载器

尽管这个东西不是为vue解决高德地图加载而专门开发的加载器，但是，它成功的被我运用到了项目中，所以，今日份推荐给你。
文档地址

2.vue项目中 AMapJS 加载器的安装与使用

贴一张图，方便下方的阅读。

安装

 通过 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]
    }

3.补充

因为vue独特的加载方式，再加之新手对于高德地图api和AMapJS的不熟悉，结合我个人的使用经验，这里我再整理一下。

下边的内容请结合上文阅读。

3.1 基础 js api 的加载

• 基础配置

// 创建 AMapJSAPI loader
      this.amapLoader = new AMapJS.AMapLoader({
      // 高德地图的key
        key: 'your key',
        version: '1.4.15',
        plugins: []
      })

• 加载基础的 js api
  个人理解，这里的代码和上面的代码一块，相当于原生中的
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>

		await this.amapLoader.load()

• 保存 AMap
  这个地方的意思，相当于是从加载过来的 js api 解析出来AMap

		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'
        })

3.2 UI加载

• 基础配置

// 创建AMapUI Loader
      this.amapuiLoader = new AMapJS.AMapUILoader({
        version: '1.1'
      })

• 加载UI
  个人理解，这里的代码和上面的代码一块，相当于原生加载UI组件库
  <script src="//webapi.amap.com/ui/1.1/main.js"></script>

		await this.amapuiLoader.load()

• 获取并保存基础控件
  大大的注意： 这里一定要用一个 [ ] 将返回的UI控件包一下，才能成功。
  其他UI控件也是如此，尽管我不知道为何如此，但一定要相信我（尝试了无数次的结果）

		// 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
          }
        })

• 控件挂载到地图
  有了这一步，UI 才能到我们的地图上

// 缩放控件挂到地图上
      this.map.addControl(this.bz)

3.3 插件加载

• 加载插件
  这句话相当于原生中加载插件

		await this.amapLoader.loadPlugin(['AMap.DistrictLayer'])

• 构造插件实例

// 绘制行政区的函数
    disProvince() {
      return new this.AMap.DistrictLayer.Province({...})
      }

• 挂载到地图

this.map.add(this.disProvince())

到此，高德中最常用的三个地方已经介绍的非常详细了。

4.结语

不得已必须要使用高德地图做这个项目，自己因此也不得已必须要去研究它，前前后后在地图加载上都搞了很多天，也查阅了太多的网络资料，自己精神几度濒临崩溃，幸运的是，在自己的不懈摸索下终于成功实现了自己的需求。

为了各位能够更快的在vue项目中使用高德地图，也为了记录，因此，十分认真的写下了这篇博客。

个人以为，这篇文章可以说是全 csdn 中介绍 vue 使用 高德地图最详细的文章了，尽管疏漏颇多，但是经历了实践的磨练，可以拿去一试了！

非常感谢您的阅读，求赞！