vue中使用高德地图的覆盖物群组

vue中使用高德地图
Map.vue

<template>
  <div class="m-map">
    <div class="search" @click="removeOverlayGroup">
      <el-input placeholder="搜企业、人员、车辆" v-model="searchKey" size="mini">
        <i slot="suffix" class="el-input__icon el-icon-position"></i>
        <i slot="suffix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </div>
    <div id="js-container" class="map"></div>
    <div class="showDetail" @click="addOverlayGroup">
      <div class="content" v-for="(item, index) in result">
        <img class="detail-img" :src=item.icon />
        <div class="detail-label">{{ item.label || '-' }}</div>
        <div class="detail-num">{{ item.num || '-' }}</div>
        <div class="detail-dw">{{ item.dw || '-' }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import remoteLoad from '@/utils/remoteLoad.js';
import { MapKey, MapCityName } from '@/config/config';
import { overView } from '../api/api'
export default {
  name: 'Map',
  props: ['lat', 'lng'],
  components:{

  },
  watch: {
    searchKey () {
      if (this.searchKey === '') {
        this.placeSearch.clear()
      }
    }
  },
  data () {
    return {
      searchKey: '',
      placeSearch: null,
      dragStatus: false,
      AMapUI: null,
      AMap: null,
      overlayGroups: '',
      result: [
        {label: '厂站','dw': '个', icon: require('@/assets/svg/company.svg'), num: '-'},
        {label: '机组','dw': '个', icon: require('@/assets/svg/shebei.svg'), num: '-'},
        {label: '装机','dw': 'MW', icon: require('@/assets/svg/PDA.svg'), num: '-'},
        {label: '用户','dw': '个', icon: require('@/assets/svg/user.svg'), num: '-'},
      ],
      markers: [],//标记点数组
      map: {},
    }
  },
  async created () {
    // 已载入高德地图API，则直接初始化地图
    await remoteLoad(`https://webapi.amap.com/maps?v=1.4.15&key=${MapKey}`);
    await remoteLoad('http://webapi.amap.com/ui/1.1/main.js');
    this.initMap();
  },
  mounted() {
    this.getoverView()
  },
  methods: {
    initMap (){
      let AMap = this.AMap = window.AMap
      // 地图基本配置
      let mapConfig = {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom:11, //初始化地图层级
        center: [116.397428, 39.90923], //初始化地图中心点
        mapStyle: 'amap://styles/light', //设置地图的显示样式
      }
      // 地图实例化
      this.map = new AMap.Map('js-container', mapConfig);
      // 构造点标记
      const lnglats = [[116.39, 39.92], [116.41, 39.93], [116.43, 39.91], [116.46, 39.93]];

      for (let i = 0; i < lnglats.length; i++) {
        let lnglat = lnglats[i];
        // 创建点实例
        let marker = new AMap.Marker({
          position: new AMap.LngLat(lnglat[0], lnglat[1]),
          icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b' + (i + 1) + '.png',
          extData: {
            id: i + 1
          }
        });
        this.markers.push(marker);
      }
    },
    // 添加覆盖物群组
    addOverlayGroup() {
      this.overlayGroups = new AMap.OverlayGroup(this.markers)
      this.map.add(this.overlayGroups);
    },
    // 移除覆盖物群组
    removeOverlayGroup() {
      this.map.remove(this.overlayGroups);
    },
    // 首页-地图上悬浮概况
    getoverView () {
      overView().then((res) => {
        this.result = [
          { label: '厂站','dw': '个',icon: require('@/assets/svg/company.svg'), num: res.result.stationCount},
          { label: '机组','dw': '个', icon: require('@/assets/svg/shebei.svg'), num: res.result.geneCount},
          { label: '装机','dw': 'MW', icon: require('@/assets/svg/PDA.svg'), num: res.result.installedCapacity},
          { label: '用户','dw': '个', icon: require('@/assets/svg/user.svg'), num: res.result.customerCount},
        ]
      })
    },
  }
};
</script>
<style lang="scss">
.m-map{
  height: 100%;
  min-width: 500px;
  min-height: 640px;
  position: relative;
  .map{
    width: 100%;
    height: 100%;
    min-height: 640px;
  }
  .search{
    position: absolute;
    top: 10px;
    left: 10px;
    width: 285px;
    z-index: 1;

    .el-input {
      .el-input__inner {
        border: 1px solid #DFDFDF;
        background-color: #ffffff;
        color: #B2B2B2;
      }
      .el-input__suffix {
        color: #002E5F;
      }
    }
  }
  .result{
    max-height: 300px;
    overflow: auto;
    margin-top: 10px;
  }
  .showDetail{
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    .content{
      background: rgba(15, 26, 83, 0.6);
      border-radius: 3px;
      height: 28px;
      line-height: 28px;
      margin-bottom: 7px;
      color: #ffffff;
      font-size: 14px;
      .detail-img {
        vertical-align: middle;
        height: 15px;
        padding-left: 8px;
        padding-right: 5px;
      }
      .detail-label{
        display: inline-block;
        padding-right: 9px;
      }
      .detail-num{
        display: inline-block;
        color: #FFD100;
        padding-right: 3px;
      }
      .detail-dw {
        display: inline-block;
        padding-right: 3px;
      }
    }
  }
}
</style>

index.vue

<mapDrag @drag="dragMap" class="mapbox"></mapDrag>
methods: {
    dragMap (data) {
      this.dragData = {
        lng: data.position.lng,
        lat: data.position.lat,
        address: data.address,
        nearestJunction: data.nearestJunction,
        nearestRoad: data.nearestRoad,
        nearestPOI: data.nearestPOI
      }
    },
 }

展示效果：