vue 高德地图 添加多个自定义图标 数字 加入点标记初始动画 鼠标移入移出动画 加入点击按钮 点标记跳动动画
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
<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'] } ]
这里是自己的坐标
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)