小程序云开发点击从云数据库生成的MARKER后,marker无法实时变换样式
时间: 2024-05-15 11:16:29 浏览: 8
可能是因为您没有实时更新Marker的样式。您可以在点击Marker时,通过云函数更新Marker的样式,并通过setData函数更新页面数据,从而实现Marker的实时变换样式。
具体实现方法可以参考以下代码:
1. 在wxml中绑定Marker点击事件:
```
<map markers="{{markers}}" bindmarkertap="onMarkerTap"></map>
```
2. 在js文件中编写onMarkerTap函数:
```
onMarkerTap(e) {
const markerId = e.markerId // 获取Marker的id
const db = wx.cloud.database()
db.collection('markers').doc(markerId).update({ // 通过云函数更新Marker的样式
data: {
iconPath: '/images/marker-active.png' // 修改Marker的iconPath属性
}
}).then(res => {
this.getMarkers() // 重新获取Marker列表数据
}).catch(err => {
console.error(err)
})
},
```
3. 在js文件中编写getMarkers函数:
```
getMarkers() {
const db = wx.cloud.database()
db.collection('markers').get().then(res => { // 从云数据库中获取Marker列表数据
const markers = res.data.map(item => ({
id: item._id,
latitude: item.latitude,
longitude: item.longitude,
iconPath: item.iconPath
}))
this.setData({ markers }) // 更新页面数据,实时更新Marker的样式
}).catch(err => {
console.error(err)
})
},
```
通过以上方法,您可以实现点击Marker后,实时更新Marker的样式。