微信小程序 調用地圖組件 實現自定義氣泡窗體

 

 

 

1.wxml

使用map組件 綁定markers 插入callout

 

 <map id="mapId" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" style="width: 100%; height: 100%;" scale="11">

 <!-- <cover-view slot="callout">

          <block wx:for="{{customCalloutMarkerIds}}" wx:key="*this">

            <cover-view marker-id="{{item}}">

            </cover-view>

          </block>

        </cover-view> -->

  </map>

 

2.js

自定義氣泡內容,添加進markes

 

 let markers = []

    if(list.length > 0){

      list.forEach(item=>{

        let normalCallout = {

          id: item.id,

          latitude: item.lon,

          longitude: item.lat,

          iconPath: item.onoff == '上線' ? '/images/location1.png' : '/images/location3.png',

          callout: {

            content: `名稱：${item.name}\n狀態：${item.onoff}`,

            color: '#000',

            fontSize: 12,

            borderWidth: 1,

            borderRadius: 10,

            borderColor: '#ccc',

            bgColor: '#fff',

            padding: 10,

            display: 'BYCLICK',

            textAlign: 'left',

          },

        }

        markers.push(normalCallout)

      })

    }