vue使用高德地图并且绘制多边形

使用鼠标工具在高德地图上绘制多边形时需要使用到一个插件，如果直接new出该工具会提示该工具不是一个函数之类的错误，在使用之前需要先告诉vue，你所是使用的是一个插件

  AMap.plugin(["AMap.MouseTool"],function () {
         mouseTool = new AMap.MouseTool(map);
    });

并且在对鼠标进行监听时，因为使用的是vue3，如果直接在setup里面使用，该函数会比地图初始化先执行，那么就会提示出mouseTool里没有on的事件，需要把这个监听放到一个函数里，在地图初始化完成后，点击按钮，再进行监听，这里是包装成了一个函数，然后再在另一个函数中执行该函数，代码中的mouseTool.polygon就是画多边形的相关配置（详细的可以查看高德地图官方文档）

  const start=()=>{
    draw()
  }
  let overlays = [];
  function draw(){
    mouseTool.polygon({
              fillColor:'#00b0ff',
              strokeColor:'#80d8ff'
              //同Polygon的Option设置
            });
    mouseTool.on('draw',function(e:any){
       (overlays as any).push(e.obj)       
    }) ;
  }

在成功把多边形绘制完成后，有时候需要获取到所绘制的多边形的经纬度数据，这时可以是使用

e.obj.getPath()来对经纬度进行获取

 mouseTool.on('draw',function(e:any){
       
        console.log(e.obj.getPath());//获取经纬度数据

       (overlays as any).push(e.obj)//绘制多边形

       //其他所要执行的操作
      
    }) ;

 想要停止画图可调用close函数

const end=()=>{
 mouseTool.close(true)//会将原本画的多边形去除
    overlays=[]
}

执行这个函数之后点击地图将不允许绘制多边形，并且原本所画的覆盖物也会被清除，如果想要在点击停止后，覆盖物还停留，可以使用另一个数组保存所画覆盖物的经纬度数据，使用高德地图的生成覆盖物的api，对所绘制的多边形进行回显

  for (var i = 0, l =pois.length; i < l; i++) {
         //生成行政区划polygon
         var polygon = new AMap.Polygon({
          map: map,
          path:pois[i],
          strokeWeight: 2,
          fillOpacity: 0.8,
          fillColor:'#c7d2e7',
          strokeColor:'#80d8ff'
         });
        (endpy as any).push(polygon);
          (map as any).add(polygon)
       }
//pois为所保存的经纬度数据数组