具体事件，具体需求请对照官方api
https://lbs.amap.com/api/javascript-api/reference/plugin
首先上效果图
image.png
项目需求:要求在高德地图上用测量工具绘制出锚点，然后吧锚点参数提交给后台，再次渲染地图为绘制的结果为线。
1.首先在public路径下的index.html文件下调用高德地图js，至于申请key请自行查看。（推荐下面npm引用）
<script language="javascript" src="//webapi.amap.com/maps?v=2.0&key=您申请的key值&plugin=AMap.ControlBar,AMap.ToolBar,AMap.RangingTool,AMap.Autocomplete,AMap.PlaceSearch,AMap.MouseTool"></script>
ps:npm 创建方法
npm install vue-amap --save
main.js中
// 引入vue-amap
import AMap from 'vue-amap';
Vue.use(AMap);
// 初始化vue-amap
AMap.initAMapApiLoader({
// 申请的高德key
key: '申请的高德key',
// 插件集合
plugin: ['AMap.ControlBar', 'AMap.RangingTool', 'AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.ToolBar', 'AMap.MouseTool', 'AMap.PolyEditor'],
v: '2.0',
});
2.创建地图,以及仪表工具盘 this.resultslist 是后台传给我的数据 为了获取到地图的首个定位点。
let map = new AMap.Map("container", {
viewMode: "3D", // 3D地图
zoom: 16,//缩放
rotation:-15,//旋转度数
pitch:50, //倾斜角度
rotateEnable:true, //地图是否可旋转
pitchEnable:true, //是否允许设置俯仰角度
viewMode:'3D',//开启3D视图,默认为关闭
buildingAnimation:true,//楼块出现是否带动画
showBuildingBlock: true, // 设置地图显示3D楼块效果，移动端也可使用。推荐使用。
resizeEnable: true, // 固定大小的窗口的大小
zooms:[3,20], //地图显示的缩放级别范围在PC上，默认为[3,18]，取值范围[3-18]；在移动设备上，默认为[3,19],取值范围[3-19]
center: [this.resultslist[0].positionX,this.resultslist[0].positionY],//地图定位
});
this.maps=map
//仪表盘
var controlBar = new AMap.ControlBar({
position:{
right:'10px',
top:'14px'
}
});
var toolBar = new AMap.ToolBar({
position:{
right:'40px',
top:'125px'
}
});
controlBar.addTo(map);
toolBar.addTo(map);
3.绘制测量工具坐标点 this.Custom为我勾选自定义坐标的时候开始绘制测量线（由于需求只需要绘制一条，如果需要绘制多条测量线自行补充）
var ruler2;
ruler2 = new AMap.RangingTool(map,{
startLabelText:"START",
midLabelText:"MID",
endLabelText:"END"
});
ruler2.turnOn(); //开启绘制
let that=this
AMap.Event.addListener(ruler2,"end",function(e){
console.log(e.points) //绘制测量工具点结束的数据
ruler2.turnOff() //关闭绘制
});
// ps:如果遇到AMap.Event报错，先打印AMap，观察下面的参数
AMap.Event.addListener(ruler2,"removenode",function(e){
console.log(e.points） //删除一段节点返回的数据
});
4.绘制折线点 path 为折线的数组坐标具体格式为[['',''],['','']]绘制多条折线。
for (var i =0; i<this.getLineListest.length;i++) {
if(this.getLineListest.length>0){
let aaabc=this.getLineListest[i].id+"cc"
aaabc = new AMap.Polyline({
path:this.getLineListest[i].lineArrList,
isOutline: true,
outlineColor: '#ffeeff',
borderWeight: 3,
strokeColor: "#3366FF",
strokeOpacity: 1,
strokeWeight: 3, //线条粗细
// 折线样式还支持 'dashed'
strokeStyle: "solid",
strokeDasharray: [0, 5],
lineJoin: 'round',
lineCap: 'round',
zIndex: 50,
})
map.add([aaabc]);
this.aaabcsest=aaabc
}
}
5.编辑画好的折线点。
<template>
<div>
<div @click="open()">开始编辑</div>
<div id="btn" @click="closend($event)">编辑结束</div>
</div>
<template>
open(){
// this.aaabcsest为绘制折线点数据
//this.maps 为创建地图数据上面都有声明到
let polyEditor = new AMap.PolyEditor(this.maps,this.aaabcsest)
this.polyEditorlist=polyEditor
polyEditor.open()
polyEditor.on('addnode', function(event) {
console.log(event)
})
polyEditor.on('adjust', function(event) {
console.log(event)
})
polyEditor.on('removenode', function(event) {
console.log(event)
})
},
closend(){
let arr = Object.keys(this.polyEditorlist)
let that=this
let btn = document.getElementById("btn");
btn.click() //这里执行模拟点击事件，点击一次方法相当于执行两次
let polyEditor = this.polyEditorlist
polyEditor.close()
polyEditor.on('end', function(event) {
console.log(event) //最终得到执行完毕的数据参数
})
},
6.绘制坐标点以及弹窗以及点击事件，由于弹框必须第一个显示所以我倒叙循环为了保证弹窗为第一个 aa为每次循环的数据依次添加坐标点。
for (var i =this.resultslist.length-1, marker; i>=0;i--) {
if(this.resultslist[i].positionX!=='' && this.resultslist[i].positionY!==''){
let aa=[this.resultslist[i].positionX,this.resultslist[i].positionY];
//坐标点
marker = new AMap.Marker({
map: map,
offset: new AMap.Pixel(-10, -32) ,// 相对于基点的偏移位置
icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
position: aa,
});
var infoWindow = new AMap.InfoWindow({
offset:new AMap.Pixel(0, -35), //偏移量
});
//坐标点弹框
marker.content = 'html';
marker.on('click', markerClick);
marker.emit('click', {target: marker});
}
}
function markerClick(e) {
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
}
vue npm 刷新页面地图可能会报错，如图所示：
image.png
只需要在new AMap.Map前面调用lazyAMapApiLoaderInstance就可以了,注意是从第一行到地图的最后结束。
import { lazyAMapApiLoaderInstance } from 'vue-amap';
lazyAMapApiLoaderInstance.load().then(() => {
let map = new AMap.Map("container", {
})
})
image.png
写的很简单，如有不足请多多包含，有帮助到的话最好不过了。
