vue-amap绘制电子围栏

【背景】在几个月前接手了一个电子围栏的需求，然后打开全局搜索'map'看一下是否有人已经绘制过地图， 结果发现package.json里面有个"vue-amap": "^0.5.10"，这个是个什么组件？项目中没人使用，但是在package.json中安装好了依赖，而且vscode中显示着这是老板安装的，我麻了～～～ 但是在开发中本着尊重团队的基本原则，我的选择只剩下了vue-amap。。。。

期望效果

安装

npm install vue-amap --save

全局注入

第一次使用高德，没有仔细阅读文档，就直接找产品要key了，结果一直报错“USERKEY_PLAT_NOMATCH”，搞得我一头雾水，后来经过仔细阅读文档后发现，需要在控制台配置pc端单独的key 错误码说明 在main.js中全局注入

import VueAMap from 'vue-amap'
VueAMap.initAMapApiLoader({
  key: '***************',
  plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.Geolocation', 'AMap.PlaceSearch'],
  v: '1.4.8',
  uiVersion: '1.0'
})

html

<template>
  <div class="amap-page-container">
    <div id="map_container">
      <div style="float: right; display: flex; margin-right: 20px">
        <el-amap-search-box class="search_box" :search-option="{
            city: searchCity,
            citylimit: true
          }" :on-search-result="onSearchResult"></el-amap-search-box>
      </div>
    </div>
    <el-amap vid="map_container" ref="map" :zoom="zoom" :events="events" :amap-manager="amapManager" :center="center" :plugin="plugin" class="map_container">
      <el-amap-polygon v-for="(polygon, index) in polygons" :vid="'ploy'+index" :key="'ploys'+index" :ref="`polygon`" :path="polygons.path" fillColor="#0DAAFC" strokeColor="#00A1E9" :fillOpacity="0.3"></el-amap-polygon>
      <el-amap-marker v-for="(marker, index) in markers" :position="marker.position" :vid="index" :key="'marker' + index" :editable="true" :draggable="true" :events="marker.events"></el-amap-marker>
    </el-amap>
  </div>
</template>

js

<script>
import { AMapManager } from 'vue-amap';
let amapManager = new AMapManager();//获取高德原生 AMap.Map
export default {
  name: 'create-areas',
  data () {
    return {
      amapManager,
      zoom: 12,
      center: [116.3974989808695, 39.90905417802464],
      searchCity: '北京',
      events: {
        click: (e) => {
          this.setLang(e)
        },
      },

      markers: [], //标注
      polygons: {
        path: [],
      }, //折线
      curMark: [], //当前路径
      plugin: [
        "ToolBar",
        "Scale",
        "OverView"
      ],
    }
  },
 
  methods: {
    onSearchResult (pois) {
      this.center = [pois[0].lng, pois[0].lat];
    },
    //设置坐标的信息
    setLang (e) {
      let newLat = [e.lnglat.lng, e.lnglat.lat]
      this.setData(newLat)
    },
    //设备图标坐标(参数二：不添加多边形)
    setData (elem, type) {
      let index = this.markers.length
      this.markers.push({
        position: elem,
        events: {
          dragend: (e) => {
            this.dragend(e, index)
          },
          click: (e) => {
            this.deleceData(index)
          }
        },
      })
      if (!type) {
        this.polygons.path.push(elem)
        this.curMark.push(elem)
      }
    },
    //拖拽地图
    dragend (e, index) {
      //获取当前被改变的经纬度信息
      // .$$getInstance()
      let newData = [e.lnglat.lng, e.lnglat.lat]
      let newList = JSON.parse(JSON.stringify(this.curMark))
      newList[index] = newData
      this.markers[index].position = newData
      this.curMark[index] = newData
      //重新绘制多边形信息
      this.polygons.path = []
      newList.map((elem, i) => {
        this.polygons.path.push(elem)
      })
    },
    //删除地图坐标
    deleceData (index) {
      this.curMark.splice(index, 1)
      this.polygons.path.splice(index, 1)
      this.markers = []
      let newList = JSON.parse(JSON.stringify(this.curMark))
      //重新绘制坐标信息
      newList.map((elem, i) => {
        this.setData(elem, true)
      })
    },
    //重置坐标点的选中
    resetMark () {
      this.markers = []
      this.curMark = []
      this.polygons.path = []
    },

  },
}
</script>

css

<style lang="scss" scoped>
.map_container {
  position: relative;
}

.amap-page-container,
.map_container {
  height: 100%;
  width: 100%;
}
.amap-page-container ::v-deep .amap-toolbar {
  left: auto !important;
  top: 60px !important;
  right: 0;
}

#map_container {
  height: 100%;
  width: 100%;
}
</style>