高德地图绘制多边形与编辑

    <div id="GDMap" style="height: calc(100vh - 100px)"></div>
    <div style="display:none">
      <ContextMenuCom ref="ContextMenuCom"></ContextMenuCom>
    </div>

      GDMap: null,
      lnglats: [
        { id: 1, position: [119.98186101, 31.77139674], flag: 0, state: 1 },
        { id: 2, position: [119.98186101, 31.76139674], flag: 0, state: 2 },
        { id: 3, position: [119.99186101, 31.76139674], flag: 0, state: 3 },
        {
          id: 4,
          position: [119.97186101, 31.76139674],
          flag: 1,
          state: 4,
          label: "小王"
        },
        {
          id: 5,
          position: [119.96186101, 31.76139674],
          flag: 1,
          state: 4,
          label: "小李"
        }
      ]

<template>
  <div style="background:red;margin-left:30px;">
    <div @click="add" style="margin-bottom:10px;">新增</div>
    <div @click="edit">编辑</div>
  </div>
</template>

    add(){
     this.$parent.draw()
    },
    edit(){
     this.$parent.edit()
    },

    draw() {
      this.isDraw = true;  
      this.mouseTool = new AMap.MouseTool(this.GDMap);
      this.mouseTool.polygon({
        fillColor: "#00b0ff",
        strokeColor: "#80d8ff"
        //同Polygon的Option设置
      });
      this.mouseTool.on("draw", e => {
        // 监听画多边形结束
        console.log("draw");
        this.overlays = [];
        console.log(e.obj);
        this.overlays.push(e.obj);
        this.mouseTool.close();
        this.isDraw = false;
      });
    },
    edit() {
      console.log("bianji");
      let polygon = this.overlays[0];
      let polyEditor = new AMap.PolygonEditor(this.GDMap, polygon);
      // polyEditor.addAdsorbPolygons(polygon1)
      polyEditor.open();
      polygon.on("dblclick", () => {
        console.log("双击");
        polyEditor.close();
      });
      polyEditor.on("end", event => { // polyEditor  close关闭时执行
        console.log(event.target.getPath());
      });
    },
    showMap() {
      AMapLoader.reset();
      AMapLoader.load({
        key: "0fa0370a30756563a2b12870585ee255b",
        version: "2.0",
        plugins: this.plugins,
        AMapUI: {
          version: "1.1",
          plugins: ["overlay/SimpleMarker"]
        },
        Loca: {
          version: "2.0"
        }
      })
        .then(AMap => {
          this.GDMap = new AMap.Map("GDMap", {
            zoom: 10,
            resizeEnable: true,
            keyboardEnable: false
          });
          this.GDMap.on("complete", () => {
            this.GDMap.on("rightclick", e => {
              if (!this.isDraw) {
                console.log("rightClick");
                //创建右键菜单
                var contextMenu = new AMap.ContextMenu();
                console.log(contextMenu);
                //右键放大
                contextMenu.addItem(
                  "放大一级",
                  () => {
                    this.GDMap.zoomIn();
                  },
                  0
                );

                //右键缩小
                contextMenu.addItem(
                  "缩小一级",
                  () => {
                    this.GDMap.zoomOut();
                  },
                  1
                );
                contextMenu.open(this.GDMap, e.lnglat);
              }
            });
            this.showMarker();
          });
        })
        .catch(() => {
          console.log("地图加载失败！");
        });
    },
    showMarker() {
      let lnglats = this.lnglats;
      for (let i = 0; i < lnglats.length; i++) {
        var Icon;
        var Label;
        if (lnglats[i].flag == 0) {
          if (lnglats[i].state == 1) {
            Icon = require("@/assets/imgs/MapAlarm.png");
          } else if (lnglats[i].state == 2) {
            Icon = require("@/assets/imgs/MapOffline.png");
          } else if (lnglats[i].state == 3) {
            Icon = require("@/assets/imgs/MapOnline.png");
          }
        } else if (lnglats[i].flag == 1) {
          Icon = require("@/assets/imgs/online-people.png");
          Label = lnglats[i].label;
        }

        var marker = new AMap.Marker({
          icon: Icon,
          position: lnglats[i].position,
          map: this.GDMap
        });
        marker.id = lnglats[i].id;
        console.log(Label);
        //if(typeof(Label)!=="undefined"){
        if (Label !== undefined) {
          marker.setLabel({
            offset: new AMap.Pixel(32, 10), //设置文本标注偏移量
            content:
              "<div class='info' style='color:#e98b05;'>" + Label + "</div>" //设置文本标注内容
            //direction: 'right' //设置文本标注方位
          });
        }
        marker.on("rightclick", () => {
          //创建右键菜单
          var contextMenu = new AMap.ContextMenu({
            isCustom: true,
            content: this.$refs.ContextMenuCom.$el
          });

          contextMenu.open(this.GDMap, lnglats[i].position);
        });
        if (lnglats[i].flag == 0) {
          marker.on("click", this.markerClick);
        }
      }
    },
    markerClick(e) {
      // console.log(e.target.id)
      console.log(e.originEvent.pageX);
      return;
      var infoWindow = new AMap.InfoWindow({
        isCustom: true, //使用自定义窗体
        autoMove: true,
        content: this.$refs.infoWindowComponent.$el,
        offset: new AMap.Pixel(16, -45)
      });
      infoWindow.open(this.GDMap, e.target.getPosition());
      this.$refs.infoWindowComponent.initialize({
        id: e.target.id,
        overlay: "info",
        infoWindow: infoWindow
      });
    },