微信小程式官方元件展示之地圖map源碼

以下将展示微信小程式之地圖map源碼官方元件能力，元件樣式僅供參考，開發者可根據自身需求定義元件樣式，具體屬性參數詳見小程式開發文檔。​

功能描述：​

地圖（v2.7.0 起支援同層渲染）。​

小程式解決方案​

除本章節介紹的小程式地圖基礎屬性外，騰訊位置服務推出《微信小程式解決方案》，從檢索API、基礎地圖元件、個性化、插件、行業方案等多個層面，為不同場景需求的小程式開發者提供完整的地圖能力。​

個性化地圖​

個性化地圖樣式是騰訊位置服務開放的一項進階能力，開發者可以根據自身産品的使用場景，UI風格， 選取或者建立風格比對的地圖樣式。小程式内地圖元件應使用同一 subkey，可通過 layer-style（位置服務官網設定的樣式 style 編号）屬性配置，并支援動态切換樣式。 元件屬性的長度機關預設為px，2.4.0起支援傳入機關(rpx/px)。詳情見：個性化地圖使用指南​

小程式插件​

騰訊位置服務基于微信提供的小程式插件能力，專注于（圍繞）地圖功能，打造一系列小程式插件，可以幫助開發者簡單、快速的建構小程式，是您實作地圖功能的最佳夥伴。目前插件提供路線規劃、地鐵圖、地圖選點服務，詳情見：小程式地圖插件使用指南。​

地圖檢索​

騰訊位置服務在微信開放社群的服務平台上線了一系列地圖檢索服務，包含4個 POI 資料類（逆位址解析、位址解析、地點搜尋、關鍵詞輸入提示）、2個路線規劃類（駕車路線規劃、步行路線規劃）、1個坐标工具類（坐标轉換），覆寫了絕大部分地圖應用場景。或者登陸位置服務官網的Webservice使用指南了解詳細介紹。 微信小程式開發者可以使用海外地圖進行展示，若需要海外檢索能力，可在海外位置服務進行申請。​

小程式示例中心​

包含 Map 元件、API、插件等功能使用方法，全面了解小程式下的所有地圖能力。示例内容源碼開放，降低各位開發者接入成本。​

近期新增功能​

支援點聚合，适用于 marker 過多場景。​

支援彩虹蚯蚓線，常用于路線規劃場景。​

覆寫物支援調整與其它地圖元素的壓蓋關系。​

支援marker（小車）平移動畫，适用于軌迹回放場景。​

地圖基礎屬性​

屬性說明：​

regionchange 傳回值​

視野改變時，regionchange 會觸發兩次，傳回的 type 值分别為 begin 和 end。​

2.8.0 起 begin 階段傳回 causedBy，有效值為 gesture（手勢觸發） & update（接口觸發）​

2.3.0 起 end 階段傳回 causedBy，有效值為 drag（拖動導緻）、scale（縮放導緻）、update（調用更新接口導緻）。​

setting​

提供 setting 對象統一設定地圖配置。同時對于一些動畫屬性如 rotate 和 skew，通過 setData 分開設定時無法同時生效，需通過 settting 統一修改。​

// 預設值​

const setting = {​

skew: 0,​

rotate: 0,​

showLocation: false,​

showScale: false,​

subKey: '',​

layerStyle: 1,​

enableZoom: true,​

enableScroll: true,​

enableRotate: false,​

showCompass: false,​

enable3D: false,​

enableOverlooking: false,​

enableSatellite: false,​

enableTraffic: false,​

}​

this.setData({​

// 僅設定的屬性會生效，其它的不受影響​

setting: {​

enable3D: true,​

enableTraffic: true​

}​

})​

marker​

标記點用于在地圖上顯示标記的位置​

注：建議為每個 marker 設定上 number 類型 id，保證更新 marker 時有更好的性能。​

marker 上的氣泡 callout​

marker 上的自定義氣泡 customCallout​

customCallout 存在時将忽略 callout 與 title 屬性。自定義氣泡采用采用 cover-view 定制，靈活度更高。​

使用方式如下，map 元件下添加名為 callout 的 slot 節點，其内部的 cover-view 通過 marker-id 屬性與 marker 綁定。當 marker 建立時，該 cover-view 顯示的内容将作為 callout 顯示在标記點上方。​

<map>​

<cover-view slot="callout">​

<cover-view marker-id="1"></cover-view>​

<cover-view marker-id="2"></cover-view>​

</cover-view>​

</map>​

marker 上的氣泡 label​

點聚合​

當地圖上需要展示的标記點 marker 過多時，可能會導緻界面上 marker 出現壓蓋，展示不全，并導緻整體性能變差。針對此類問題，推出點聚合能力。​

使用流程如下：​

1.MapContext.initMarkerCluster 對聚合點進行初始化配置（可選）；​

2.MapContext.addMarkers 指定參與聚合的 marker；​

3.MapContext.on('markerClusterCreate', callback) 觸發時，通過 MapContext.addMarkers 更新聚合簇的樣式 （可選）；​

4.MapContext.removeMarkers 移除參與聚合的 marker；​

示例代碼​

在開發者工具中預覽效果​

需注意的是：​

1.地圖上的 marker 分為普通的 marker 與參與聚合的 marker，參與聚合時需指定屬性 joinCluster 為 true；​

2.自定義聚合簇樣式時，同樣通過 MapContext.addMarkers 進行繪制，此時需攜帶 clusterId。​

polyline​

指定一系列坐标點，從數組第一項連線至最後一項。繪制彩虹線時，需指定不同分段的顔色，如 points 包含 5 個點，則 colorList 應傳入 4 個顔色值；若 colorList 長度小于 points.length - 1，則剩下的分段顔色與最後一項保持一緻。​

注：textStyle 與 segmentTexts 結合可在折線線段上面繪制文字，用來顯示路名。​

SegmentText​

TextStyle​

level 字段表示與其它地圖元素的壓蓋關系，可選值如下：​

polygon​

指定一系列坐标點，根據 points 坐标資料生成閉合多邊形​

circle​

在地圖上顯示圓​

control​

在地圖上顯示控件，控件不随着地圖移動。即将廢棄，請使用 cover-view​

position​

bindregionchange 傳回值​

比例尺​

示例代碼​

JAVASCRIPT​

Page({
  data: {
    latitude: 23.099994,
    longitude: 113.324520,
    markers: [{
      id: 1,
      latitude: 23.099994,
      longitude: 113.324520,
      name: 'T.I.T 創意園'
    }],
    covers: [{
      latitude: 23.099994,
      longitude: 113.344520,
      iconPath: '/image/location.png'
    }, {
      latitude: 23.099994,
      longitude: 113.304520,
      iconPath: '/image/location.png'
    }]
  },
  onReady: function (e) {
    this.mapCtx = wx.createMapContext('myMap')
  },
  getCenterLocation: function () {
    this.mapCtx.getCenterLocation({
      success: function(res){
        console.log(res.longitude)
        console.log(res.latitude)
      }
    })
  },
  moveToLocation: function () {
    this.mapCtx.moveToLocation()
  },
  translateMarker: function() {
    this.mapCtx.translateMarker({
      markerId: 1,
      autoRotate: true,
      duration: 1000,
      destination: {
        latitude:23.10229,
        longitude:113.3345211,
      },
      animationEnd() {
        console.log('animation end')
      }
    })
  },
  includePoints: function() {
    this.mapCtx.includePoints({
      padding: [10],
      points: [{
        latitude:23.10229,
        longitude:113.3345211,
      }, {
        latitude:23.00229,
        longitude:113.3345211,
      }]
    })
  }
})
      

WXML​

Page({
  data: {
    latitude: 23.099994,
    longitude: 113.324520,
    markers: [{
      id: 1,
      latitude: 23.099994,
      longitude: 113.324520,
      name: 'T.I.T 創意園'
    }],
    covers: [{
      latitude: 23.099994,
      longitude: 113.344520,
      iconPath: '/image/location.png'
    }, {
      latitude: 23.099994,
      longitude: 113.304520,
      iconPath: '/image/location.png'
    }]
  },
  onReady: function (e) {
    this.mapCtx = wx.createMapContext('myMap')
  },
  getCenterLocation: function () {
    this.mapCtx.getCenterLocation({
      success: function(res){
        console.log(res.longitude)
        console.log(res.latitude)
      }
    })
  },
  moveToLocation: function () {
    this.mapCtx.moveToLocation()
  },
  translateMarker: function() {
    this.mapCtx.translateMarker({
      markerId: 1,
      autoRotate: true,
      duration: 1000,
      destination: {
        latitude:23.10229,
        longitude:113.3345211,
      },
      animationEnd() {
        console.log('animation end')
      }
    })
  },
  includePoints: function() {
    this.mapCtx.includePoints({
      padding: [10],
      points: [{
        latitude:23.10229,
        longitude:113.3345211,
      }, {
        latitude:23.00229,
        longitude:113.3345211,
      }]
    })
  }
})
      

Bug & Tip​

1.tip：個性化地圖暫不支援工具中調試。請先使用微信用戶端進行測試。​

2.tip：地圖中的顔色值color/borderColor/bgColor等需使用6位（8位）十六進制表示，8位時後兩位表示 alpha 值，如：#000000AA​

3.tip：地圖元件的經緯度必填, 如果不填經緯度則預設值是北京的經緯度。​

4.tip: map 元件使用的經緯度是火星坐标系，調用 wx.getLocation 接口需要指定 type 為 gcj02​

5.tip：從 2.8.0 起 map 支援同層渲染，更多請參考原生元件使用限制​

6.tip：請注意原生元件使用限制。​

7.tip: 若目前元件所在的頁面或全局開啟了 enablePassiveEvent 配置項，該内置元件可能會出現非預期表現（詳情參考 enablePassiveEvent 文檔）​