vue-amap 遍历出一个marker，改变它的icon

<template>
  <div class="amap-page-container">
    <el-amap vid="amapDemo"
             :amap-manager="amapManager"
             :events="mapEvents"
             class="amap-demo">
      <el-amap-marker vid="component-marker"
                      v-for="(marker, index) in markers"
                      :key="index"
                      :position="marker.position"
                      :content="marker.icon"
                      :offset="[-20,-20]">
      </el-amap-marker>
    </el-amap>
  </div>
</template>

<script>
import VueAMap from 'vue-amap'
let amapManager = new VueAMap.AMapManager()
export default {
    
    
  name: 'Test',
  components: {
    
    

  },
  data () {
    
    
    return {
    
    
      markerIcon: '<div class="jumper"><div></div><div></div><div></div></div>',
      amapManager,
      mapEvents: {
    
    
        init (o) {
    
    
          o.setMapStyle('amap://styles/edbc379c8110f081c564f98d8c59f80c');//自定义的高德地图的样式
        }
      },
      markers: [
        {
    
    
          id: '01',
          position: [116.405994, 39.915378],
          icon: '',
        }, {
    
    
          id: '02',
          position: [121.5273285, 31.21315058],
          icon: '',
        }

      ]
    }
  },
  methods: {
    
    



  },
  created () {
    
    
    // 遍历出一个marker，改变它的icon
    for (let i = 0; i < this.markers.length; i++) {
    
    
      if (this.markers[i].id === '02') {
    
    
        this.markers[i].icon = this.markerIcon
      }
    }
  },
  mounted () {
    
    
  
  }

}



</script>

<style>
.amap-page-container {
    
    
  height: 500px;
}
.amap-demo {
    
    
  height: 500px;
}
.bg {
    
    
  background: #0099cc;
  height: 150px;
  width: 100%;
}
.jumper {
    
    
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 40px;
  height: 40px;
}
.jumper > div {
    
    
  background-color: #f4090a;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  animation-fill-mode: both;
  position: absolute;
  left: 0px;
  top: 0px;
  opacity: 0;
  margin: 0;
  width: 40px;
  height: 40px;
  animation: jumper 1s 0s linear infinite;
}
.jumper > div:nth-child(2) {
    
    
  -webkit-animation-delay: 0.33333s;
  animation-delay: 0.33333s;
}
.jumper > div:nth-child(3) {
    
    
  -webkit-animation-delay: 0.66666s;
  animation-delay: 0.66666s;
}
@keyframes jumper {
    
    
  0% {
    
    
    transform: scale(0);
    opacity: 0;
  }
  5% {
    
    
    opacity: 1;
  }
  100% {
    
    
    transform: scale(1);
    opacity: 0;
  }
}
</style>