VUE项目中调用高德地图

前言

相信大家或多或少都接触过在大屏的项目，在大屏项目中除了用到了echarts中的行政地图，街道地图也是很常见的，今天主要来说一下在vue中调用高德地图遇到的一些问题??。

申请高德key

无论我们使用任何方式调用高德地图都需要在高德地图开放平台中申请key??

• 注册帐号

访问高德地图开发平台根据实际情况填写就可以??（实名认证的时候选择个人就可以，如果是企业级的项目，可能会涉及人员变动，建议使用公司邮箱进行注册）区别如下??。

• 创建应用

新建应用时名称，与类型可以随意填写，尽量填写的与开发的应用一直，方便后期维护??

应用创建成功之后，点击添加就会需要我们选择需要使用高德地图的哪些服务，不同的服务平台，对应填写的内容也有所区别??，例如Android需要填写App包名，Android的SHA1码等等，因为我这次的项目是个大屏项目所以就选择Web端（JSAPI）??

信息填写完毕之后就会在当前应用下生成对应的Key值和安全密钥（安全密钥在之前的版本中是没有的）

技术选型

[这里是代码009]

vue-amap是基于 Vue 2.x 与高德的地图组件???，提供一些基础和高级的功能，例如：地图扎点，信息窗体，搜索组件，类型插件等等，不需要我们在造轮子了，所以我们就来试一试??。

准备工作

当我们在使用组件的时候都会先看一下文档，但是当我在看文档的时候发现，文档中只有对应的api而没有示例，很难下手，于是在[这里是代码013]中找到了答案。

解决方案也很简单

• 将项目下载到本地

• 修改src/docs/index.html里的docsify引用

  将

• 执行npm install npm start默认在4201端口就会启动项目就可以看到项目示例了。

项目中应用

• npm安装

  npm install vue-amap --save

• main.js中挂载vue-amap

  import VueAMap from ‘vue-amap’;
  Vue.use(VueAMap);
  VueAMap.initAMapApiLoader({
  //申请地址 https://lbs.amap.com/ 选择web端jsAPI
  key: ‘自己申请的高德地图key’,
  // 插件集合，用到什么插件就使用什么插件
  plugin: [‘AMap.Autocomplete’, ‘AMap.PlaceSearch’, ‘AMap.Scale’, ‘AMap.OverView’, ‘AMap.ToolBar’, ‘AMap.MapType’, ‘AMap.PolyEditor’, ‘AMap.CircleEditor’],
  v: ‘1.4.4’, // 高德sdk版本，最新的sdk已经出到了2.0
  //官网解释：JSAPI 2.0 提供的开发接口与 1.4 版本达到 99%的兼容度，但是为了保证插件的稳定性我们还是选择1.4.4。
  })

• 组件用法

以上就是在vue项目中使用vue-amap调用高德地图api的基本使用??，具体对地图的操作可以根据文档的规范来就可以了，在使用的过程中可能会遇到几个问题??。

刷新页面，地图加载偶尔失败

• 在main.js中加入以下内容。

  // 解决地图刷新显示不出来
  const amapKeys = Object.keys(localStorage).filter(key => key.match(/^AMap/))
  amapKeys.forEach(key => {
  // console.log(key)
  localStorage.removeItem(key)
  })

在绑定插件的时候，控制台报错 a[d].split is not a function

• 含有地图组件的路由不使用懒加载的方式（临时方案）

注： vue-amap 是不支持vue3.x，??并且不能绑定高德地图新版api对应的安全密钥jscode,可能会导致部分服务无法使用。 对应的vue3版本的插件看这里??。

原生调用高德API

• 安装官方提供的loader

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

• main.js中绑定安全密钥jscode（不绑定部分功能无法使用）

  // 该写法只推荐在开发阶段，如果在生产阶段建议采用反向代理
  // 官网说明https://lbs.amap.com/api/javascript-api/guide/abc/prepare
  window._AMapSecurityConfig = {
  securityJsCode: ‘jscode’ // 输入你的jscode
  }

• 封装组件

混合使用（vue-amap与原生API混合使用）

• 只想通过 vue-amap 引入高德地图，而部分实例化的操作直接基于高德地图的 sdk 完成

实例化操作不是加载地图，简单来说就是用一些属性去实例化地图的这个类 new xxx() 代表的就是实例化xxx??。这样就不需要在使用el-amap中的center属性和zoom属性了??，因为已经通过原生的方式进行实例化了??。

import { lazyAMapApiLoaderInstance } from 'vue-amap';
lazyAMapApiLoaderInstance.load().then(() => {
  // your code ...
  this.map = new AMap.Map('amapContainer', {
    center: new AMap.LngLat(121.59996, 31.197646)
  });
}); 
1
2
3
4
5
6
7

• 在vue-amap中引入高德原生SDK只需在el-amap上绑定amap-manager就可以拿到高德原生AMap.Map实例文档地址

  
    add marker
  
  1
  2
  3

总结

网上针对高德地图的调用方案也有很多，我也是刚刚接触，文中的观点都是自身的看法，最后说一下自身对选型的判断??。

• 如果是大屏类的项目，没有过多的交互只是简单扎点，展示建议使用vue-amap???。
• 如果是已地图为中心的项目，包括人员路线，轨迹等等比较复杂的交互建议使用原生???。

参考链接

• 高德地图API

• vue-amap

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦