具体事件，具体需求请对照官方api
https://lbs.amap.com/api/javascript-api/reference/plugin
首先上效果图

image.png

<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

写的很简单，如有不足请多多包含，有帮助到的话最好不过了。