vue使用高德地图覆盖物（多边形），以及对多边形的操作

高德地图覆盖物（多边形）

涉及内容：地图的加载，点坐标的生成...

HTML部分

<div>
     <div id="container2" style="width:80%;height:500px;margin-left:100px;"></div>
     <div id="pickerBox">
         <input id="pickerInput" placeholder="输入关键字选取地点" />
         <div id="poiInfo"></div>
      </div>
      <div style="position:relative;z-index:9999;top:-519px;left:508px;">
          <el-button @click="addPolygon" type="primary">添加围栏</el-button>
      </div>
 </div>

JS部分

// 引入地图
import AMap from 'AMap' 
// 定义全局
var gMap2, polygon02


loadGMapV2 (flag) { // 加载地图(电子围栏)
        var markerSet, placeSearch
        gMap2 = new AMap.Map('container2', {
          resizeEnable: true,
          zoom: 13,
          center: [121.498586, 31.239637],  // 地图中心点
        })
        if (flag === 1) {
          if (this.createItem.lnglats) {
            this.fetchPoint(this.createItem.lnglats)
          }
          this.mapManLngLat = [this.createItem.lng, this.createItem.lat]
          markerSet = new AMap.Marker({
            position: [this.createItem.lng, this.createItem.lat]
          })
          this.mapManLngLat.push(markerSet)
          markerSet.setMap(gMap2)
        }
        // 为地图注册click事件获取鼠标点击出的经纬度坐标
        var that = this
        AMap.event.addListener(gMap2, 'click', function (e) { // 添加点击事件,传入对象名，事件名，回调函数
          var lng = e.lnglat.getLng()
          var lat = e.lnglat.getLat()
          gMap2.remove(that.mapManLngLat)
          markerSet = new AMap.Marker({
            position: [lng, lat]
          })
          that.mapManLngLat.push(markerSet)
          markerSet.setMap(gMap2)
          that.createItem.lng = lng
          that.createItem.lat = lat
          // 搜索完成后，清除地图点坐标
          if (placeSearch) {
            placeSearch.clear()
            if (placeSearch.render) {
              placeSearch.render.markerList.clear()
            }
          }
        })
        var autoOptions = {// 搜索输入提示
          input: 'pickerInput'
        }
        var auto = new AMap.Autocomplete(autoOptions)
        placeSearch = new AMap.PlaceSearch({
          map: gMap2
        })  // 构造地点查询类
        AMap.event.addListener(auto, 'select', function (e) { // 注册监听，当选中某条记录时会触发
          placeSearch.setCity(e.poi.adcode)
          placeSearch.search(e.poi.name)  // 关键字查询查询
        })
      },

// 添加多边形

addPolygon () { // 添加自定义多边形
        if (polygon02) {
          gMap2.remove(polygon02)
        }
        var polygonArr01 = []  // 多边形覆盖物节点坐标数组
        var cenlatlng = gMap2.getCenter()
        var lng = cenlatlng.toString().split(',')[0]
        var lat = cenlatlng.toString().split(',')[1]
        polygonArr01.push([lng, lat])
        polygonArr01.push([lng, lat - 0.003])
        polygonArr01.push([lng - 0.003, lat - 0.003])
        polygonArr01.push([lng - 0.003, lat])
        polygon02 = new AMap.Polygon({
          map: gMap2,
          path: polygonArr01, // 设置多边形边界路径
          isOutline: true,
          borderWeight: 3,
          strokeColor: '#FF33FF',
          strokeWeight: 6,
          strokeOpacity: 0.2,
          fillOpacity: 0.4,
          fillColor: '#1791fc',
          // extData: info,      // 标识
          zIndex: 10
        })
        polygon02.setMap(gMap2)
        var polyEditor02 = new AMap.PolyEditor(gMap2, polygon02)
        var that = this
        AMap.event.addListener(polygon02, 'dblclick', function () {  // 鼠标左键双击事件（开始编辑）
          polyEditor02.open()
        })
        // AMap.event.addListener(polygon02, 'click', function () {  // 鼠标左键单击事件(关闭编辑)
        //   polyEditor02.close()
        //   that.createItem.lnglats = that.saveUntil(polygon02.getPath())
        // })
        AMap.event.addListener(polygon02, 'rightclick', function () { // 鼠标右键单击事件(关闭编辑)
          polyEditor02.close()
          that.createItem.lnglats = that.saveUntil(polygon02.getPath())
        })
      },

CSS部分

<style lang="stylus">
   #pickerBox {
    position: relative;
    z-index: 9999;
    top: -481px;
    left: 118px;
    width: 360px;
    height: 45px;
    background: #fff;
    box-shadow: 0 2px 2px rgba(0,0,0,.15);
    border-radius: 2px 3px 3px 2px;
}
 #pickerInput {
     width: 200px;
     border: none;
      outline: none;
     padding: 14px 5px;
 }
 #poiInfo {
     background: #fff;
 }
 .amap_lib_placeSearch .poibox.highlight {
     background-color: #CAE1FF;
 }
 .amap_lib_placeSearch .poi-more {
     display: none!important;
 }
</style>