微信小程序：map組件的簡單使用，標註callout與label簡單用法

效果圖

                            

 

wxml

<map
      id="myMap"
      style="width: 100%; height: 300px;"
      latitude="{{latitude}}"
      longitude="{{longitude}}"
      markers="{{markers}}"
      show-location
      enable-zoom="{{true}}"
    ></map>

 

 

        很常用的一些參數，沒什麼太大疑問，不過博主在使用時發現了一點十分有趣的事：enable-zoom屬性默認爲true，在開發工具中竟然沒有作用，無法縮放，問題出在本地設置的調試基礎庫中，博主選擇了當前最新版本2.8.0便一切正常了。

                                       

        附：經緯度查詢

 

js

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    latitude: 34.7681097764,
    longitude: 113.7693285942,
    markers: [{
      id: 1,
      latitude: 34.7681097764,
      longitude: 113.7693285942,

      //氣泡label (可與callout 2選1)
      label:{
        content: '金水區綠地原盛國際1號樓A座9樓',  //文本
        color: '#FF0202',  //文本顏色
        borderRadius: 3,  //邊框圓角
        borderWidth: 1,  //邊框寬度
        borderColor: '#FF0202',  //邊框顏色
        bgColor: '#ffffff',  //背景色
        padding: 5,  //文本邊緣留白
        textAlign: 'center'  //文本對齊方式。有效值: left, right, center
      },

      //氣泡callout
      callout: {
        content: '金水區綠地原盛國際1號樓A座9樓',  //文本
        color: '#FF0202',  //文本顏色
        borderRadius: 3,  //邊框圓角
        borderWidth: 1,  //邊框寬度
        borderColor: '#FF0202',  //邊框顏色
        bgColor: '#ffffff',  //背景色
        padding: 5,  //文本邊緣留白
        textAlign: 'center'  //文本對齊方式。有效值: left, right, center
      }
    }],

  },
})

        callout氣泡標註需要點擊標註點。

        label會直接顯示，其有屬性anchorX與anchorY爲與原點marker的相對座標。