vue-amap的简单使用线路、标记、水波纹

项目需要用地图展示线路和标记位置，老板说用高德吧。。。
开始入坑vue-amap

开始

高德原生jsAPI已经很成熟，这回在vue项目中用高德vue版，话不多说，上demo代码。

• vue create xxx
• npm install vue-amap --save
• npm run serve

main.js

import Vue from 'vue'
import App from './App.vue'
import VueAMap from 'vue-amap';

Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: '0c3b5aa083f840f9e7068e3e2456b0f3',
  //插件 就用到这些 可以自己添加
  plugin: ['AMap.Scale','AMap.ToolBar', 'AMap.MapType'],
  v: '1.4.4'
});

• 个人习惯 就是想封装 我把地图自己的覆盖物组件封装到了 TGdCustomMap.vue文件
• 水波纹是自定义的 CSS动画和组件，本来用的是 window.requestAnimationFrameAPI，但是添加信息窗体之后，滑动地图时窗体闪烁，于是就改成了CSS动画
• 请给每个覆盖物添加uukey属性，这是我自定义的，标识唯一性，我在这上面吃过亏

关于vue-amap事件

给map或者覆盖物添加事件必须这样(借用文档）

<el-amap :events="events" >
        <el-amap-marker :events="events"></el-amap-marker>
</el-amap>

事件格式如下 顺便介绍参数 组件实例可以使用api方法
各种api 见高德地图开放平台

events: {
	complete: () => {
            //地图首次加载完成 并完成覆盖物加载 没有参数 只有map有这个事件
     },
	init: e =>{
		//初始化事件里 e 代表该组件实例 可以使用api方法
	},
	click: e => {
		//事件 e.target是组件实例 可以使用api方法
	},
	//其他类似click
}

截图如下：

其他不想说了 要下班了

代码上传GitHub https://github.com/zhoutengjiao/gd-vue-dd.git
我觉得注释还可以 还会继续完善 QQ: 806771366