小程序点击图标,让marker的图标发生变化,点击其他marker时,这个图标恢复原来的样子
时间: 2023-05-29 21:01:15 浏览: 417
1. 首先,在地图加载完成后,获取所有的marker,并遍历每一个marker。
2. 给每一个marker添加一个点击事件处理函数,当点击marker时,将当前marker的图标变为需要的图标(比如红色图标),同时将其他marker的图标恢复为原来的样子(比如蓝色图标)。
3. 最后,我们可以给地图添加一个默认的图标样式,这样当用户第一次进入小程序时,所有marker的图标都将呈现默认样式。
以下是示例代码:
```js
// 获取地图对象
const map = wx.createMapContext('myMap')
// 获取所有marker
const markers = [{
id: 0,
latitude: 39.90403,
longitude: 116.407526,
iconPath: '/images/blue_marker.png',
}, {
id: 1,
latitude: 31.230416,
longitude: 121.473701,
iconPath: '/images/blue_marker.png',
}, {
id: 2,
latitude: 22.543099,
longitude: 114.057868,
iconPath: '/images/blue_marker.png',
}]
// 绑定地图marker的点击事件
markers.forEach(function(marker) {
marker.callout = { content: marker.id } // 调用显示marker编号
marker.width = 30
marker.height = 30
marker.anchor = { x: 0.5, y: 0.5 }
marker.iconPath = '/images/blue_marker.png'
marker.clickable = true
marker.bindtap = function() {
// 遍历所有marker
for (let i = 0, len = markers.length; i < len; i++) {
// 如果是当前marker
if (markers[i].id === marker.id) {
// 将当前marker的图标改为红色
markers[i].iconPath = '/images/red_marker.png'
} else {
// 将其他marker的图标改为蓝色
markers[i].iconPath = '/images/blue_marker.png'
}
}
// 更新地图marker
map.updateMarkers({ markers })
}
})
// 设置默认marker样式
map.addMarkers({ markers })
```
阅读全文