<script src="https://webapi.amap.com/maps?v=1.4.15&key=自己的key值"></script>
data中声明: marker: null, markers: []
for (let i = 0; i < this.List.length; i++) {
this.marker = new AMap.Marker({
position: this.scenicList[i].point,
animation: 'AMAP_ANIMATION_DROP',
extData: this.scenicList[i],
icon: new AMap.Icon({
size: new AMap.Size(40, 55),
image: '',//自己的图片
imageSize: new AMap.Size(40, 55)
}),
label: {
offset: new AMap.Pixel(12, 15),
content: i + 1,
style: {
width: "33px",
height: "48px",
lineHeight: "48px",
textAlign: "center",
color: "#528495"
}
}
})
this.markers.push(this.marker)
this.marker.setMap(map);
this.marker.on("click", (e) => {});//点击事件
// 鼠标悬浮时触发动画效果
this.marker.on('mouseover', function () { this.marker.setAnimation('AMAP_ANIMATION_BOUNCE'); });
// 鼠标移开时停止动画效果
this.marker.on('mouseout', function () { this.marker.setAnimation(null); });
map.setFitView();
}
this.map.add(this.markers)
list:[]//存档数据数组
点击事件
setAdd(el, index) {
//点击点聚合操作
this.map.setCenter(el.point);
//根据点击的下标找到对应的点标记
this.markers[index].setAnimation('AMAP_ANIMATION_BOUNCE');
//加入定时器 2s后清除动画
setTimeout(() => {
this.markers[index].setAnimation(null);
}, 2000);
},
待解决问题
点标记为10 数字并未居中
this.List=[{point:['121.258417','29.685926'] } ]
这里是自己的坐标