项目需要用地图展示线路和标记位置,老板说用高德吧。。。
开始入坑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.requestAnimationFrame
API,但是添加信息窗体之后,滑动地图时窗体闪烁,于是就改成了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