在vue中使用amap高德地图的注意事项

文档

vue-amap这个项目是由 elemefe 团队维护的，但是他的在线文档已经挂了一两年了好像，代码全部不现实，所以我们需要结合GitHub 上的 md一起看。

使用示例

然后高德地图官方是有给出很多示例的，或者说也有很多网上的内容是不基于vue-amap的，一是可以修改代码使他符合vue-amap，再来我们可以使用这里提到的lazyAMapApiLoaderInstance

AMap 和 AMapUI 对象

在lazyAMapApiLoaderInstance的方法下，如果你用了 eslint，直接调用 AMap 会报错，因为没有声明。

请注意不要

import AMap from 'vue-amap'

因为VueAMap和AMap对象是不一样的，AMap 对象会在 js 文件加载之后自动注入到 global。所以这里没有声明是正确的，只是 ide 不懂。这里我们可以在.eslintrc加上

"globals": {

    "AMap": true

  }

如果要使用AMapUI对象也是一样的道理

UI 库初始化

如果你按照文档来初始化

默认是没有引入 ui 库的…所以如果直接使用AMapUI会报is not defined …离谱的是居然没有在任何地方提及

需要在 init 的时候加上uiVersion

VueAMap.initAMapApiLoader({

  key: 'your key',

  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],

  v: '1.4.15',

  uiVersion: '1.1'

})