vue高德地图点击放大Maker

需要自行引入高德地图，参考https://elemefe.github.io/vue-amap/#/。本案例实现点击高德地图上的marker并放大该markder的图标。当点击另外的markder时，当前marker恢复原来的大小

效果图：

<template>
  <div id="mapExam">
    <el-amap ref='map' vid="amapDemo" :amap-manager="amapManager" :events="mapEvents"  class="amap-demo">
      <el-amap-marker class="selectedMarker"
                      v-for="(marker, index) in datas"
                      :key="index" :position="marker.lnglat"
                      :icon="marker.level === 'A' ? levelAIcon : (marker.level === 'B' ? levelBIcon : levelCIcon)"
                      topWhenClick="true"
                      :extData="marker"
                      :events="markerEvents">
      </el-amap-marker>
    </el-amap>
  </div>
</template>

<style lang="less" scoped>
  .amap-demo {
    height: 3rem;
  }
</style>
<script>
  import { AMapManager } from 'vue-amap'
  let amapManager = new AMapManager()

  export default {
    data() {
      let self = this
      return {
        amapManager,
        levelAIcon: new AMap.Icon({
          size: new AMap.Size(25, 30),    // 图标尺寸
          image: require('../assets/img/[email protected]'),  // Icon的图像
          imageSize: new AMap.Size(25, 30)
        }), // A类图标
        levelBIcon: new AMap.Icon({
          size: new AMap.Size(25, 30),    // 图标尺寸
          image: require('../assets/img/[email protected]'),  // Icon的图像
          imageSize: new AMap.Size(25, 30)
        }), // B类图标
        levelCIcon: new AMap.Icon({
          size: new AMap.Size(25, 30),    // 图标尺寸
          image: require('../assets/img/[email protected]'),  // Icon的图像
          imageSize: new AMap.Size(25, 30)
        }), // C类图标
        datas: [
          {
            id: 1,
            level: 'A',
            lnglat: [121.5273285, 31.21515044],
          },
          {
            id: 2,
            level: 'A',
            lnglat: [121.5253184, 31.21515044],
          },
          {
            id: 3,
            level: 'A',
            lnglat: [121.5253184, 31.21315044],
          },
          {
            id: 4,
            level: 'A',
            lnglat: [121.5253184, 31.21715044],
          },
          {
            id: 5,
            level: 'A',
            lnglat: [121.5233184, 31.21515044],
          },
          {
            id: 6,
            level: 'A',
            lnglat: [121.5233184, 31.21715044],
          },
          {
            id: 7,
            level: 'B',
            lnglat: [121.5283285, 31.21815044],
          },
          {
            id: 8,
            level: 'B',
            lnglat: [121.5293184, 31.21915044],
          },
          {
            id: 9,
            level: 'B',
            lnglat: [121.5263184, 31.21615044],
          },
          {
            id: 10,
            level: 'B',
            lnglat: [121.5223184, 31.21915044],
          },
          {
            id: 11,
            level: 'B',
            lnglat: [121.5203184, 31.21515044],
          },
          {
            id: 12,
            level: 'B',
            lnglat: [121.5233184, 31.21015044],
          },
          {
            id: 13,
            level: 'C',
            lnglat: [121.5203285, 31.21815044],
          },
          {
            id: 14,
            level: 'C',
            lnglat: [121.5293184, 31.21015044],
          },
          {
            id: 15,
            level: 'C',
            lnglat: [121.5263184, 31.21315044],
          },
          {
            id: 16,
            level: 'C',
            lnglat: [121.5223184, 31.21415044],
          },
          {
            id: 17,
            level: 'C',
            lnglat: [121.5243184, 31.21915044],
          },
          {
            id: 18,
            level: 'C',
            lnglat: [121.5203184, 31.20995044],
          },
          {
            id: 19,
            level: 'C',
            lnglat: [121.5103184, 31.20995044],
          }
        ],
        lastClickedMarker: null,
        mapEvents: {
          init(o) {
            // o 为地图组件实例
          },
          complete () {
            const map = self.amapManager.getMap() // 获取地图组件实例
            // setFitView(overlayList:Array)
            // 根据地图上添加的覆盖物分布情况，
            // 自动缩放地图到合适的视野级别，参数overlayList默认为当前地图上添加的所有覆盖物图层
            map.setFitView()
          }
        },
        markerEvents: {
          click(e) {
            self.selectedMarkerStore = e.target.getExtData()
            if (self.lastClickedMarker) {
              let icon = self.lastClickedMarker.getIcon()
              self.lastClickedMarker.setOffset(new AMap.Pixel(-10, -30))
              self.lastClickedMarker.setIcon(
                new AMap.Icon({
                  size: new AMap.Size(25, 30),    // 图标尺寸
                  image: icon.F.image,  // Icon的图像
                  imageSize: new AMap.Size(25, 30)
                })
              )
            }
            let icon2 = e.target.getIcon()
            e.target.setIcon(
              new AMap.Icon({
                size: new AMap.Size(40, 50),    // 图标尺寸
                image: icon2.F.image,  // Icon的图像
                imageSize: new AMap.Size(40, 50)
              })
            )
            e.target.setOffset(new AMap.Pixel(-18, -50))
            self.lastClickedMarker = e.target
          }
        }
      }
    },
    mounted() {
      AMap.plugin('AMap.CircleEditor', function () {//回调函数
      })
    },
  }
</script>