<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>
vue-amap 遍历出一个marker,改变它的icon
最新推荐文章于 2023-08-18 16:56:31 发布