【vue+amap】高德地图绘制多边形区域

参考文档：
高德地图参考手册
高德地图示例代码

1、高德地图控制台创建应用，获取权限ak

高德地图控制台

Ps.本项目里按钮等基础控件使用的是element-ui版本控件

2、项目内全局引入

index.html内引入高德地图代码：

<script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode: "你的安全密钥"
    };
  script>
  <script
    type="text/javascript"
    src="https://webapi.amap.com/maps?v=1.4.6&key=你的key"
  >script>
  <script
    type="text/javascript"
    src="http://webapi.amap.com/maps?v=1.4.6&key=你的key&plugin=AMap.PolyEditor&plugin=AMap.MouseTool"
  >script>

3、完整项目代码

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"
            >绘制</el-button
          >
          <el-button size="small" icon="el-icon-add" @click="handelFinishDraw"
            >完成</el-button
          >
          <el-button
            size="small"
            icon="el-icon-refresh-left"
            @click="handleClearDraw"
            >重置</el-button
          >
        </div>
        <div class="picker-color" v-if="isediting">
          <div class="text">选择颜色</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>&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: 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() {
      // 地图创建
      var map = new AMap.Map("container", {
        zoom: 11, //级别
        center: [111.688264, 40.818205], //兴泰御都国际
        viewMode: "3D", //使用3D视图
      });
      // 添加一个标记点
      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: "东方国信",
          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);// 将 LabelMarker 实例添加到 LabelsLayer 上
      map.add(labelsLayer);// 将 LabelsLayer 添加到地图上
      // 创建默认区域
      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]); // 缩放地图到合适的视野级别
      this.map = map;
      // 如果后期想修改默认区域：修改this.poly即可
      // var polyEditor = new AMap.PolyEditor(map, polygon);
      // this.poly = polyEditor;
    },
    /* 操作按钮 */
    // 编辑
    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("覆盖物对象绘制完成:", event.obj);// event.obj 为绘制出来的覆盖物对象
      });
    },
    handelFinishDraw() {
      this.isediting = false;
      this.tool.close();
    },
    //重置
    handleClearDraw() {
      this.isediting = false;
      this.tool.close(true);
    },
    //切换颜色
    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: