微信小程序map-动态修改markers的解决方法
目录
微信小程序map 动态修改markers的解决方法
微信小程序map动态markers的解决方法
先上效果图
这里演示点击标记点，改变他的气泡背景颜色和字体颜色
1.动态修改数据，需要用到 this.setData()， 2.markers 是一个数组，这里需要涉及setData 修改内部属性的方式： **page.js –> onMarkerTap() **
// bindmarkertap="onMarkerTap"
onMarkerTap(res) {
let len = this.data.markers.length
for (let i = 0; i < len; i++) {
if (this.data.markers[i].id == res.markerId) {
this.setData({
// 这里的语法是，将原本定位该属性的方式转换为字符串，再套上一个[]。
[`markers[${i}].callout.bgColor`]: "#ffd101",
[`markers[${i}].callout.color`]:"#1d0817"
})
break
}
}
}page.js –> data
data: {
latitude: 30.66089,
longitude: 104.08572,
markers:[{
id:1,
latitude: 30.67089,
longitude: 104.09572,
callout:{
content:"小黑黑",
borderRadius:2,
padding:2,
display:"ALWAYS",
textAlign:"center",
bgColor:"#808080",
color:"#ffffff",
}
}]
}page.html