vue-amap + amapUI 记录

image.png

安装

npm install vue-amap --save

main.js配置

//vue-amap地图
import VueAMap from 'vue-amap'  

Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: '1959b432192b52554e996fe8764917c8',
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
  // 默认高德 sdk 版本为 1.4.4
  // v: '1.4.4',
  uiVersion: '1.1.1'// ui版本号 如果要用UI组件直接在此处添加使用的版本号就可以了，不用的话改为上句
                    // 因为下面我要用的点坐标样式需要更改，因此用了UI组件
});

vue文件中

这里有两种方法，一个是vue组件ui，也就是官方方法https://elemefe.github.io/vue-amap/#/zh-cn/introduction/ui-component

不过我按照官方文档，要实现我自己的需求有些困难，主要是我太菜了。下面我用的是js的api。注意js2.0的api需要搭配1.1的ui组件，不是官方示例的1.0。

图例卡片是自己加的，这样最方便简单了，想要什么样式就写什么样式。

*目前还是没有弄清楚，为什么在mounted或者$nextTick当中"AMap is not defined"，下面的定时器能解决，看起来是挂载之类的问题，但我的vue.use()确实在new vue之前，明天再看一下