高德地图增加地理围栏

先上效果图片：

第一步引入高德地图：

在目录public -> index.html中引用该地址

 <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=自己的key"></script>

第二步：

 如果需要使用搜索功能会报infocode:"10008" INVALID_USER_SCODE这个错误。

在目录public -> index.html中引用该地址之前加入，要不然没效果

<script type="text/javascript">
            window._AMapSecurityConfig = {
                securityJsCode:'安全秘钥',
            }
    </script>

第三步vue子模块：

<template>
  <div>
    <div class="periphery-search-box">
      <div class="search-box" id="myPageTop">
        <input id="tipinput" placeholder="请求输入关键字" v-model="keywords" @keydown.enter="addSearchFun" maxlength="12" />
        <div class="search-list-box" v-for="item in cearchList" v-if="openSearch">
          <div class="search-list-select" @click="selectSearch(item.location.lng,item.location.lat)">{{item.name}}</div>
        </div>
      </div>
    </div>

    <div id="container"></div>
    <div class="button-type">
      <button @click="openFun">编辑</button><button @click="closeFun">关闭</button>
      <button @click="addRailFun">增加</button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "railMap",
    data() {
      return {
        map: null,
        icon: null,
        markerValue: 0,
        markerList: [],
        polyEditor: null,
        polygon: null,
        defaultCenter:this.center,
        defaultNodes:this.nodes,
        placeSearch: null,
        keywords: "",
        cearchList:[],
        openSearch:false
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        let then = this;
        this.defaultCenter = this.getDefaultCenter();
        this.map = new AMap.Map("container", {
          resizeEnable: true,
          center: this.defaultCenter,
          zoom: 13,
          viewMode: '3D',
        });
        AMap.plugin('AMap.PlaceSearch', function() {
          var autoOptions = {
            city: '全国'
          }
          then.placeSearch = new AMap.PlaceSearch(autoOptions);
        })
        // this.createIcon();
        // this.map.on("rightclick", this.closeFun)
        //this.map.on("rightclick", this.rightclick)
        this.addPolygon()
      },
      getDefaultCenter(){
        let dc = this.defaultCenter;
        if(dc == null || dc == undefined || dc.length <= 0){
          return [116.397428, 39.90923];
        }
        return dc;
      },
      //增加搜索
      addSearchFun() {
        let then = this;
        if (!this.keywords) {
          this.$message.error('搜索内容不能为空');
          return;
        }
        this.placeSearch.search(this.keywords, function(status, result) {
          if(status == "error")return;
          then.openSearch = true;
          then.cearchList = result.poiList.pois
        })
      },
      selectSearch(lng,lat){
        this.map.setCenter([lng,lat]);
        this.openSearch = false;
      },
      //增加多边形编辑
      addPolygon() {
        this.polygon = new AMap.Polygon({
          // path: path,
          // strokeColor: "#FF33FF",
          strokeWeight: 6,
          strokeOpacity: 0.2,
          fillOpacity: 0.4,
          fillColor: '#1791fc',
          zIndex: 50,
          bubble: true,
        })
        this.map.add([this.polygon])
        // 缩放地图到合适的视野级别
        this.map.setFitView()

        let then = this;
        //构造折线编辑对象，并开启折线的编辑状态
        this.map.plugin(["AMap.PolygonEditor"], function() {
          then.polyEditor = new AMap.PolygonEditor(then.map, then.polygon);
          // then.polyEditor.on("end", then.end)
          then.polyEditor.on("addnode", then.addnodeFun)
          then.polyEditor.on("adjust", then.adjustFun)
          then.polyEditor.on("removenode", then.removenodeFun)
        });
      },
      setPolygonNode(){
        let dn = this.defaultNodes;
        if(dn != null && dn != undefined && dn.length > 0){
          this.polygon.setPath(dn)
        }
      },
      closeFun() {
        this.polyEditor.close();
      },
      openFun() {
        this.polyEditor.open();
      },
      //结束
      end(v) {},
      //增加
      addnodeFun(t) {
        let s = this.judgeNode();
        if (!s) return;
        this.judgeArea();
      },
      //编辑
      adjustFun(t) {
        let s = this.judgeNode();
        if (!s) return;
        this.judgeArea();
      },
      //移除
      removenodeFun(t) {
        let s = this.judgeNode();
        if (!s) return;
        this.judgeArea();
      },
      judgeNode() {
        let nodeNumber = 100;
        let p = this.polygon.getPath();
        if (p.length > nodeNumber) {
          this.$message.error('节点不能大于' + nodeNumber + '个');
          return false;
        }
        return true;
      },
      judgeArea() {
        let areaSize = 100; //平分公里
        let area = this.polygon.getArea() / 100000000; //单位平方米，换算平分公里
        console.log(area)
        if (area > areaSize) {
          this.$message.error('选择面积不能大于' + areaSize + '平分公里');
          return false;
        }
        return true;
      },
      //增加初始化的围栏
      addRailFun() {
        if (!this.openConfirm("是否重新添加围栏，添加会覆盖原来的围栏")) return;
        this.closeFun();
        let c = this.map.getCenter();
        let lng = c.lng;
        let lat = c.lat;
        var newPath = []
        for (let i = 0; i < 4; i++) {
          let latlng = [];
          let p = [];

          let nlng = 0;
          let nlat = 0;
          if (i == 0) {
            nlng = lng;
            nlat = lat;
          } else if (i == 1) {
            nlng = lng + 0.01;
            nlat = lat;
          } else if (i == 2) {
            nlng = lng + 0.01;
            nlat = lat + 0.01;
          } else if (i == 3) {
            nlng = lng;
            nlat = lat + 0.01;
          }
          latlng.push(nlng);
          latlng.push(nlat);
          newPath.push(latlng);
        }
        this.polygon.setPath(newPath)
      },
      openConfirm(content) {
        return confirm(content);
      },
      //获取所有节点
      getNodes(){
        return this.polygon.getPath();
      },




      //下面是增加水滴标记
      createIcon() {
        // 创建 AMap.Icon 实例：
        this.icon = new AMap.Icon({
          size: new AMap.Size(40, 50), // 图标尺寸
          image: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', // Icon的图像
          imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
          imageSize: new AMap.Size(30, 40) // 根据所设置的大小拉伸或压缩图片
        });
      },
      addMarker(label, lng, lat) {
        // 将 Icon 实例添加到 marker 上:
        var marker = new AMap.Marker({
          position: new AMap.LngLat(lng, lat),
          offset: new AMap.Pixel(-13, -30),
          icon: this.icon, // 添加 Icon 实例
          title: '北京',
          zoom: 13,
          // 设置是否可以拖拽
          draggable: true,
          cursor: 'move',
          label: label
        });
        marker.on("dragging", this.draggingFun);
        marker.on("dragend", this.dragendFun);
        this.addMarkerArrays(label, lng, lat);
        marker.setMap(this.map);
      },
      rightclick(e) {
        if (this.markerList.length >= 100) {
          alert("标记不能大于100个")
          return;
        }
        let ll = e.lnglat;
        this.addMarker("1", ll.lng, ll.lat);
      },
      draggingFun(e) {
        console.log(e)
      },
      dragendFun(e) {
        console.log(e, '结束')
      },
      //增加标记数组
      addMarkerArrays(label, lng, lat) {
        let t = {};
        t.label = label
        t.lng = lng
        t.lat = lat
        this.markerList.push(t);
      }
    },
    props:{
      center:{
        type:Array,
        default:null
      },
      nodes:{
        type:Array,
        default:null
      }
    }
  }
</script>

<style scoped lang="scss">
  #container {
    height: 600px;
  }

  .periphery-search-box {
    height:4px;

    .search-box {
      height: 160px;
      position: absolute;
      top: 60px;
      z-index: 88888888;
    }
    .search-list-box{
      background-color: #fff;
      .search-list-select{
        line-height: 30px;
        cursor: pointer;
      }
      .search-list-select:hover{
        background-color: #ccc;
      }
    }
  }

  .button-type {
    text-align: right;
    padding: 5px;
  }
</style>