[vue+amap] Gaode map draws polygonal area

Reference documentation:
Amap Reference Manual
Amap sample code

1. Create an application in the Amap console and obtain permission ak

Gaode map console

Ps. In this project, basic controls such as buttons use the element-ui version control.

2. Global introduction within the project

Introduce the Amap code into index.html:

<script type="text/javascript">
    window._AMapSecurityConfig = {<!-- -->
      securityJsCode: "your security key"
    };
  </script>
  <script
    type="text/javascript"
    src="//i2.wp.com/webapi.amap.com/maps?v=1.4.6 & amp;key=your key"
  ></script>
  <script
    type="text/javascript"
    src="http://webapi.amap.com/maps?v=1.4.6 & amp;key=your key & amp;plugin=AMap.PolyEditor & amp;plugin=AMap.MouseTool"
  ></script>

3. Complete project code

template:

<template>
  <div class="map-wrap">
    <div>
      <h1>{<!-- -->{<!-- --> msg }}</h1>
      <div class="flex">
        <div class="button-wrap">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-edit"
            @click="handleDraw"
            >Draw</el-button
          >
          <el-button size="small" icon="el-icon-add" @click="handelFinishDraw"
            >Done</el-button
          >
          <el-button
            size="small"
            icon="el-icon-refresh-left"
            @click="handleClearDraw"
            >Reset</el-button
          >
        </div>
        <div class="picker-color" v-if="isediting">
          <div class="text">Select a color</div>
          <span
            @click="handleChangeColor(item)"
            v-for="item in colors"
            :key="item.code"
            :class="[
              'color' + item.code,
              drawColor == item.value ? 'active' : '',
            ]"
          >
            <i v-if="drawColor == item.value" class="el-icon-check"></i>
            <i v-else> & amp;nbsp;</i>
          </span>
        </div>
      </div>
    </div>
    <div style="width: 1200px; height: 500px; padding-left: calc(50% - 600px)">
      <div id="container"></div>
    </div>
  </div>
</template>

js:

<script>
export default {<!-- -->
  name: "Map",
  data() {<!-- -->
    return {<!-- -->
      msg: "Map drawing display page",
      map: null,
      poly: null,
      drawColor: "#2A8DFF",
      colors: [
        {<!-- --> code: 1, value: "#FF6B36" },
        {<!-- --> code: 2, value: "#FFAD29" },
        {<!-- --> code: 3, value: "#FFDA21" },
        {<!-- --> code: 4, value: "#29E98F" },
        {<!-- --> code: 5, value: "#1EEDE6" },
        {<!-- --> code: 6, value: "#2A8DFF" },
        {<!-- --> code: 7, value: "#CC16EF" },
        {<!-- --> code: 8, value: "#F53ABD" },
      ],
      paths: [
        [111.683736, 40.818554],
        [111.684444, 40.816971],
        [111.689036, 40.818172],
        [111.688264, 40.819788],
      ],
      mouseOverEvent: true,
      isediting: false,
      tool: null,
    };
  },

  created() {<!-- -->
    this.$nextTick(() => {<!-- -->
      this.createMap();
    });
  },
  methods: {<!-- -->
    createMap() {<!-- -->
      // Map creation
      var map = new AMap.Map("container", {<!-- -->
        zoom: 11, //Level
        center: [111.688264, 40.818205], //Xingtai Yudu International
        viewMode: "3D", //Use 3D view
      });
      //Add a marker point
      var marker = new AMap.LabelMarker({<!-- -->
        icon: "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
        position: [111.687931, 40.818392],
        offset: new AMap.Pixel(-10, -30),
        text: {<!-- -->
          content: "Oriental Guoxin",
          direction: "right",
          style: {<!-- -->
            fontSize: 15,
            fillColor: "#fff",
            strokeColor: "rgba(255,255,0,0.5)",
            strokeWidth: 2,
            padding: [3, 10],
            backgroundColor: "blue",
            borderColor: "#ccc",
            borderWidth: 3,
          },
        },
      });
      var labelsLayer = new AMap.LabelsLayer({<!-- -->
        collision: true,
      });
      labelsLayer.add(marker);//Add LabelMarker instance to LabelsLayer
      map.add(labelsLayer);//Add LabelsLayer to the map
      //Create default area
      var polygon = new AMap.Polygon({<!-- -->
        path: this.paths,
        strokeColor: "#fff",
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillOpacity: 0.4,
        fillColor: this.drawColor,
        zIndex: 50,
      });
      map.add(polygon);
      map.setFitView([polygon]); // Zoom the map to the appropriate field of view level
      this.map = map;
      // If you want to modify the default area later: just modify this.poly
      // var polyEditor = new AMap.PolyEditor(map, polygon);
      // this.poly = polyEditor;
    },
    /* Operation button */
    // edit
    handleDraw() {<!-- -->
      // this.poly.open();
      this.isediting = true;
      var mouseTool = new AMap.MouseTool(this.map);
      this.tool = mouseTool;
      mouseTool.polygon({<!-- -->
        strokeColor: "#FFF",
        strokeOpacity: 1,
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillColor: this.drawColor,
        fillOpacity: 0.4,
        strokeStyle: "solid",
      });
      mouseTool.on("draw", function (event) {<!-- -->
      console.log("The overlay object is drawn:", event.obj);// event.obj is the drawn overlay object
      });
    },
    handelFinishDraw() {<!-- -->
      this.isediting = false;
      this.tool.close();
    },
    //reset
    handleClearDraw() {<!-- -->
      this.isediting = false;
      this.tool.close(true);
    },
    //switch color
    handleChangeColor(item) {<!-- -->
      this.drawColor = item.value;
      this.tool.polygon({<!-- -->
        strokeColor: "#FFF",
        strokeOpacity: 1,
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillColor: this.drawColor,
        fillOpacity: 0.4,
        strokeStyle: "solid",
      });
    },
  },
};
</script>

css:

<style scoped>
h1 {<!-- -->
  font-weight: normal;
}
#container {<!-- -->
  width: 100%;
  height: 100%;
}
.map-wrap {<!-- -->
  position: relative;
  width: 100%;
  height: 100%;
}
.map-wrap .flex {<!-- -->
  display: flex;
  flex-shrink: 0;
  white-space: nowrap;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  line-height: 50px;
  width: 1200px;
  padding-left: calc(50% - 600px);
}
.allmap {<!-- -->
  width: 100%;
  height: calc(100% - 50px);
  position: absolute;
}
ul {<!-- -->
  list-style: none;
}
.picker-color {<!-- -->
  text-align: right;
  padding-right: 30px;
}
.text {<!-- -->
  display: inline-block;
  padding: 0 10px;
  float: left;
}
span {<!-- -->
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 20px;
  border-radius: 4px;
  border-width: 2px;
  border-style: solid;
  margin-left: 8px;
  overflow: hidden;
  text-align: center;
  margin-top: 10px;
  float: left;
}
span i {<!-- -->
  font-weight: 600;
}
.color1 {<!-- -->
  border-color: #ff6b36;
  background: rgba(255, 107, 54, 0.3);
  color: #ff6b36;
}
.color2 {<!-- -->
  border-color: #ffad29;
  background: rgba(255, 173, 41, 0.3);
  color: #ffad29;
}
.color3 {<!-- -->
  border-color: #ffda21;
  background: rgba(255, 218, 33, 0.3);
  color: #ffda21;
}
.color4 {<!-- -->
  border-color: #29e98f;
  background: rgba(41, 233, 143, 0.3);
  color: #29e98f;
}
.color5 {<!-- -->
  border-color: #1eede6;
  background: rgba(30, 237, 230, 0.3);
  color: #1eede6;
}
.color6 {<!-- -->
  border-color: #2a8dff;
  background: rgba(42, 141, 255, 0.3);
  color: #2a8dff;
}
.color7 {<!-- -->
  border-color: #cc16ef;
  background: rgba(204, 22, 239, 0.3);
  color: #cc16ef;
}
.color8 {<!-- -->
  border-color: #f53abd;
  background: rgba(245, 58, 189, 0.3);
  color: #f53abd;
}
</style>