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