在vue中使用腾讯地图绘制围栏功能

首先，先看效果图

里面包含了自定义多边形绘制围栏。圆形绘制以及矩形等方式，以及清除围栏经纬度的方法和获取围栏经纬度的方法。
首先在项目的index.html中引入腾讯地图

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=你的密钥&libraries=drawing"></script>

在你的密钥这个位置。去腾讯地图申请，然后替换了就可以了。
最后奉上具体代码：

<template>
  <div class="">
    <div id="mapFencecontainer" class="mapBox" style="width:100%;height:100%;position: absolute;">
      <div class="mapBtn">
        <!-- <el-button size="small" type="danger" @click="delpolygon()">删除多边形</el-button> -->
        <el-button size="small" type="danger" @click="clearOverlays()">清除</el-button>
        <el-button size="small" type="primary" @click="sendLngLat">确认</el-button>
        <el-button size="small" type="primary" @click="sendMsg">返回</el-button>
      </div>
    </div>
    <!-- <p>给地图绑定了点击事件，当点击地图时，会在点击位置显示Marker。</p> -->

  </div>
</template>

<script>
import { Notification } from 'element-ui';
let map, marker, polygon, drawingManager, lngLat; // 地图，坐标点，多边形初始化加载，多边形绘制，多边形每个点的集成数组
const markersArray = []; let overlaysArray = []; // 标注点集合,绘制多边形时的集合
let path4 = [];// 设置回显数据参数
// 默认展示假数据回显参数
let arr = [{ 'lat': 34.80506482194067, 'lng': 113.59760284423828 },
           { 'lat': 34.780394716350614, 'lng': 113.59365463256836 },
           { 'lat': 34.760794345237514, 'lng': 113.58541488647461 },
           { 'lat': 34.7330074293797, 'lng': 113.58455657958984 },
           { 'lat': 34.70281206762318, 'lng': 113.61854553222656 },
           { 'lat': 34.70027176815597, 'lng': 113.62884521484375 },
           { 'lat': 34.6987193245323, 'lng': 113.63296508789062 },
           { 'lat': 34.69914272113635, 'lng': 113.63880157470703 },
           { 'lat': 34.699001589175694, 'lng': 113.64498138427734 },
           { 'lat': 34.698578191849535, 'lng': 113.68309020996094 },
           { 'lat': 34.73907339121123, 'lng': 113.68206024169922 },
           { 'lat': 34.738932327388824, 'lng': 113.6920166015625 },
           { 'lat': 34.76319176276739, 'lng': 113.69218826293945 },
           { 'lat': 34.763050740134055, 'lng': 113.70386123657227 },
           { 'lat': 34.7864571976711, 'lng': 113.70214462280273 },
           { 'lat': 34.786739162702524, 'lng': 113.68206024169922 },
           { 'lat': 34.809997957307736, 'lng': 113.68223190307617 },
           { 'lat': 34.81098454894641, 'lng': 113.64789962768555 },
           { 'lat': 34.81366238099493, 'lng': 113.62936019897461 }]; // 用于数据回显的假数据  后期会调用接口返回数据
export default {
  props: ['parentmsg'],
  data() {
    return {
      longitude: '',
      latitude: '',
      lngLatData: [] // 绘制多边形坐标点
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    // 子组件给父组件传值(返回按钮)
    sendMsg() {
        // func: 是父组件指定的传数据绑定的函数，this.msg:子组件给父组件传递的数据
        this.$emit('funcCancle', false);
    },
    // 子组件给父组件传值(确认按钮)
    sendLngLat() {
      
       if (lngLat == undefined) {
         lngLat = path4;
       }

       const h = this.$createElement;
       
    },
    // 地图初始化
   init() {
    map = new qq.maps.Map(document.getElementById('mapFencecontainer'), {
        center: new qq.maps.LatLng(34.764152, 113.667636), // 暂时默认郑州
        zoom: 13
    });
    // 标注的生成与回显
    this.addMarker(new qq.maps.LatLng(30.925788712587014, 103.8922119140625)); // 初始化回显标注
    this.markerOnly();
    // 多边形绘制及回显
    // 设置多边形路径以便回显
    // path4 = [];

    arr.forEach(item => {
      path4.push(new qq.maps.LatLng(item.lat, item.lng));
    });
   
    console.log(path4);
    this.showpolygon(path4);
    // 绘制
    this.addpolygon();
    },
    // 添加监听事件 获取鼠标单击事件（仅留一个标注点）
    markerOnly() {
      qq.maps.event.addListener(map, 'click', function(event) {
          this.addMarker(event.latLng);
          qq.maps.event.addListener(map, 'click', function(event) {
              this.deleteOverlays(); // 删除原有标注仅留下一个
              marker = new qq.maps.Marker({
                  position: event.latLng,
                  map: map
              });
          });
          var gps = event.latLng.getLat() + ',' + event.latLng.getLng(); // 解析出来的点方便给后端
          });
      },
    // 添加标记
    addMarker(location) {
      this.deleteOverlays();
      var marker = new qq.maps.Marker({
          position: location,
          map: map
      });
      markersArray.push(marker);
    },
    // 删除标记
    deleteOverlays() {
        if (markersArray) {
            // for (i in markersArray) {
            for (var i = 0;i < markersArray.length;i++) {
                markersArray[i].setMap(null);
            }
            markersArray.length = 0;
        }
        if (marker !== undefined) {
            marker.setMap(null);
        }
    },
    /**
 * 多边形绘制
*/
  // 绘制
  addpolygon() {
      drawingManager = new qq.maps.drawing.DrawingManager({
          drawingMode: qq.maps.drawing.OverlayType.POLYGON, // 默认选中多边形绘制
          drawingControl: true,
          drawingControlOptions: {
            position: qq.maps.ControlPosition.TOP_CENTER,
          //   drawingModes: [
          //     qq.maps.drawing.OverlayType.POLYGON
          //   ]
          // 表头显示区域
          drawingModes: [
              qq.maps.drawing.OverlayType.MARKER,
              qq.maps.drawing.OverlayType.CIRCLE,
              qq.maps.drawing.OverlayType.POLYGON,
              qq.maps.drawing.OverlayType.POLYLINE,
              qq.maps.drawing.OverlayType.RECTANGLE
              ]
          },
          markerOptions: {
            visible: false
          },
          // 多边形样式
          polygonOptions: {
            editable: true,
            strokeColor: new qq.maps.Color(202, 67, 58, 0.8),
            fillColor: new qq.maps.Color(202, 67, 58, 0.1),
            clickable: false
          },
          // 圆形样式
          circleOptions: {
            fillColor: new qq.maps.Color(255, 208, 70, 0.3),
            strokeColor: new qq.maps.Color(88, 88, 88, 1),
            strokeWeight: 3,
            clickable: false
          }
      });

      drawingManager.setMap(map);
      qq.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
          // clearOverlays(overlaysArray)
          lngLat = [];
          overlaysArray.push(event.overlay);
          for (const item of event.overlay.getPath().elems) {
            const lng = item.getLng();
            const lat = item.getLat();

            lngLat.push({
              lat: lat,
              lng: lng
            });
          }

          console.log(lngLat); // 获得相应的经纬度值
      });
  },
  // 初始化回显
  showpolygon(path3) {
    polygon = new qq.maps.Polygon({
        map: map,
        editable: true,
        strokeColor: new qq.maps.Color(202, 67, 58, 0.8),
        fillColor: new qq.maps.Color(202, 67, 58, 0.1)
        });
        polygon.setPath(path3);
    },
  // 删除初始化多边形
  delpolygon() {
      const a = [];
      polygon.setPath(a);
  },
  // 删除绘制的多边形
 clearOverlays() {
    arr = []; // 清除假数据
    path4 = [];
    polygon.setPath(path4);
    if (overlaysArray) { // 这个if判断在vue中会报错，不知道是里面的for in 被重写还是咋的，原因还不知道，如果报错可以不要这个if判断，删除标注那个地方跟这个原理是一样的，报错的话也不要，把长度重置为0
        // for (i in overlaysArray) {
        for (var i = 0;i < overlaysArray.length;i++) {
            overlaysArray[i].setMap(null);
        }
    }
    overlaysArray = []; // 需要重置为空，否则之前的数据还在这个数组里面
    lngLat = [];
    console.log(drawingManager);
    this.init();
}

  }
};
</script>
<style scoped lang="scss">
  .mapBox {
    position: relative;
    .mapBtn {
      position: absolute;
      bottom: 20px;
      right: 20px;
      z-index: 999;
    }

  }

</style>