微信小程序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

<map 
    id="mapId"
    class="map"
    latitude="{{latitude}}" 
    longitude="{{longitude}}"
    markers="{{markers}}"
    bindmarkertap="onMarkerTap"
    bindcallouttap="onCalloutTap"
    bindlabeltap="onLabelTap"
    show-location="true"
  >
  </map>