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

in 前端 with 0 comment

文档

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

本文由 hunsh 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: Mar 17, 2021 at 11:46 pm

← → ↓ ↑
Responses