地圖

createMapContext

TIP

該API使用方法為： wx.createMapContext(string mapId, Object this)

功能說明： 創建map上下文MapContext對象
參數及說明：
- string mapId，map 組件的id
- Object this，在自定義組件下，當前組件實例的this，以操作組件內 map 組件
返回值： MapContext

MapContext

TIP

若無特殊說明，MapContext的方法對手機廠商支持度默認為系統地圖（僅iOS支持）：是
穀歌地圖（Android、IDE支持）：是
華為地圖（僅Android支持）：是
騰訊地圖：是
百度地圖：是
高德地圖：是

MapContext實例，可通過 wx.createMapContext 獲取。
MapContext通過id跟一個 map MapContext通過id跟一個 map組件
示例代碼：

<!-- map.wxml -->
<map id="myMap" show-location />

<button type="primary" bindtap="getCenterLocation">Get Location</button>
<button type="primary" bindtap="moveToLocation">Move location</button>
<button type="primary" bindtap="translateMarker">Move annotations</button>
<button type="primary" bindtap="includePoints">Zoom in to show all latitude and longitude</button>

<!-- map.wxml -->
// map.js
Page({
  onReady: function (e) {
    // Use wx.createMapContext to get map context.
    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: 0,
      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,
      }]
    })
  }
})

.addArc

TIP

該API使用方法為： MapContext.addArc(Object object)

TIP

支持度：不支持

功能說明： 添加弧線，途經點與夾角必須設定一個，途經點必須在起終點有效座標範圍內，否則不能生成正確的弧線，同時設定夾角角度時，以夾角角度為准，夾角定義為起點到終點，與起點外切線逆時針旋轉的角度，工具側暫未支持。

參數及說明： Object object

内容	類型	預設值	必填	說明
id	number	-	是	圓弧id
start	Object	-	是	起始點
end	Object	-	是	終點
pass	Object	-	否	途經點
angle	number	0	否	夾角角度
width	number	5	否	線寬
color	number	#000000	否	線的顏色
success	Function	-	否	接口調用成功的回呼函數
fail	Function	-	否	接口調用失敗的回呼函數
complete	Function	-	否	接口調用結束的回呼函數（無論成功與否都執行）

start的結構内容
結構内容類型預設值必填說明
longitude number - 是經度
latitude number - 是緯度
end結構内容
結構内容類型預設值必填說明
longitude number - 是經度
latitude number - 是緯度
pass結構内容
結構内容類型預設值必填說明
longitude number - 是經度
latitude number - 是緯度

.addCustomLayer

TIP

該API使用方法為： MapContext.addCustomLayer(Object object)

TIP

支持度：不支持

功能說明： 添加個性化圖層。圖層創建參攷文件。

參數及說明： Object object

内容	類型	預設值	必填	說明
layerId	string	-	是	個性化圖層id
success	Function	-	否	接口調用成功的回呼函數
fail	Function	-	否	接口調用失敗的回呼函數
complete	Function	-	否	接口調用結束的回呼函數（無論成功與否都執行）

.addGroundOverlay

TIP

該API使用方法為： MapContext.addGroundOverlay(Object object)

TIP

支持度：IDE支持，安卓和ios不支持

功能說明： 創建自定義圖片圖層，圖片會隨著地圖縮放而縮放。

參數及說明： Object object

内容	類型	預設值	必填	說明
id	String	-	是	圖片圖層id
src	String	-	是	圖片路徑，支持網絡圖片、臨時路徑、代碼包路徑
bounds	Object	-	是	圖片覆蓋的經緯度範圍
visible	Boolean	true	否	是否可見
zIndex	Number	1	否	圖層繪製順序
opacity	Number	1	否	圖層透明度
success	Function	-	否	接口調用成功的回呼函數
fail	Function	-	否	接口調用失敗的回呼函數
complete	Function	-	否	接口調用結束的回呼函數（無論成功與否都執行）

bounds的結構内容
結構内容類型預設值必填說明
southwest Object - 是西南角經緯度
northeast Object - 是東北角經緯度
- southwest結構内容
  結構内容類型預設值必填說明
  longitude number - 是經度
  latitude number - 是緯度
- northeast結構内容
  結構内容類型預設值必填說明
  longitude number - 是經度
  latitude number - 是緯度

.addMarkers

TIP

該API使用方法為： MapContext.addMarkers(Object object)

功能說明： 添加marker。

參數及說明： Object object

内容	類型	預設值	必填	說明
markers	array	-	是	同傳入map組件的marker内容
clear	Boolean	false	否	是否先清空地圖上所有marker
success	Function	-	否	接口調用成功的回呼函數
fail	Function	-	否	接口調用失敗的回呼函數
complete	Function	-	否	接口調用結束的回呼函數（無論成功與否都執行）

.eraseLines

TIP

該API使用方法為： MapContext.eraseLines(Object object)

功能說明： 擦除或置灰已添加到地圖中的線段。

參數及說明： Object object

内容	類型	預設值	必填	說明
lines	Array.<`Object`>	-	是	擦除的線段數組，詳見polyline 内容
success	Function	-	否	接口調用成功的回呼函數
fail	Function	-	否	接口調用失敗的回呼函數
complete	Function	-	否	接口調用結束的回呼函數（無論成功與否都執行）

lines的結構内容

結構内容	類型	預設值	必填	說明
id	number	-	是	線段的id
index	number	-	是	指定線段的某一段，線段起點index為0
point	Object	-	是	指定線段某一段中的點
clear	boolean	true	否	為true是擦除，false是置灰

point的結構内容
結構内容類型預設值必填說明
longitude number - 是經度
latitude number - 是緯度

.fromScreenLocation

TIP

該API使用方法為： MapContext.fromScreenLocation(Object object)

功能說明： 獲取荧幕上的點對應的經緯度，座標原點為地圖左上角。

參數及說明： Object object

内容	類型	預設值	必填	說明
x	number	-	是	x座標值
y	number	-	是	y座標值
success	Function	-	否	接口調用成功的回呼函數
fail	Function	-	否	接口調用失敗的回呼函數
complete	Function	-	否	接口調用結束的回呼函數（無論成功與否都執行）

object.success回呼函數參數： Object res。
結構内容類型預設值必填說明
longitude number - 是經度
latitude number - 是緯度

.getCenterLocation

TIP

該API使用方法為： MapContext.getCenterLocation(Object object)

功能說明： 獲取當前地圖中心的經緯度。返回的是gcj02坐標系，可以用於wx.openLocation()

參數及說明： Object object

内容	類型	預設值	必填	說明
iconPath	string	-	否	圖標路徑，支持網絡路徑、本地路徑、代碼包路徑
success	Function	-	否	接口調用成功的回呼函數
fail	Function	-	否	接口調用失敗的回呼函數
complete	Function	-	否	接口調用結束的回呼函數（無論成功與否都執行）

object.success回呼函數參數： Object res。
結構内容類型預設值必填說明
longitude number - 是經度
latitude number - 是緯度

.getRegion

TIP

該API使用方法為： MapContext.getRegion(Object object)

功能說明： 獲取當前地圖的視野範圍。

參數及說明： Object object

内容	類型	預設值	必填	說明
success	Function	-	否	接口調用成功的回呼函數
fail	Function	-	否	接口調用失敗的回呼函數
complete	Function	-	否	接口調用結束的回呼函數（無論成功與否都執行）

object.success回呼函數參數： Object res。
結構内容類型說明
southwest Object 西南角經緯度
northeast Object 東北角經緯度
- southwest結構内容
  結構内容類型說明
  longitude number 經度
  latitude number 緯度
- northeast結構内容
  結構内容類型說明
  longitude number 經度
  latitude number 緯度

結構内容	類型	說明
southwest	Object	西南角經緯度
northeast	Object	東北角經緯度

結構内容	類型	說明
longitude	number	經度
latitude	number	緯度

結構内容	類型	說明
longitude	number	經度
latitude	number	緯度

.getRotate

TIP

ios不支持

TIP

該API使用方法為： MapContext.getRotate(Object object)

功能說明： 獲取當前地圖的旋轉角。

參數及說明： Object object

内容	類型	預設值	必填	說明
success	Function	-	否	接口調用成功的回呼函數
fail	Function	-	否	接口調用失敗的回呼函數
complete	Function	-	否	接口調用結束的回呼函數（無論成功與否都執行）

object.success回呼函數參數： Object res。
内容類型說明
rotate number 旋轉角

内容	類型	說明
rotate	number	旋轉角

.getScale

TIP

該API使用方法為： MapContext.getScale(Object object)

功能說明： 獲取當前地圖的縮放級別

參數及說明： Object object

内容	類型	預設值	必填	說明
success	Function	-	否	接口調用成功的回呼函數
fail	Function	-	否	接口調用失敗的回呼函數
complete	Function	-	否	接口調用結束的回呼函數（無論成功與否都執行）

object.success回呼函數參數： Object res。
内容類型說明
scale number 縮放值

内容	類型	說明
scale	number	縮放值

.getSkew

TIP

ios不支持

TIP

該API使用方法為： MapContext.getSkew(Object object)

功能說明： 獲取當前地圖的傾斜角。

參數及說明： Object object

内容	類型	預設值	必填	說明
success	Function	-	否	接口調用成功的回呼函數
fail	Function	-	否	接口調用失敗的回呼函數
complete	Function	-	否	接口調用結束的回呼函數（無論成功與否都執行）

object.success回呼函數參數： Object res。
内容類型說明
skew number 傾斜角

内容	類型	說明
skew	number	傾斜角

.includePoints

TIP

ios不支持

TIP

該API使用方法為： MapContext.includePoints(Object object)

功能說明： 縮放視野展示所有經緯度。

參數及說明： Object object

内容	類型	預設值	必填	說明
points	array	-	是	要顯示在可視區域內的座標點清單
padding	array	-	否	座標點形成的矩形邊緣到地圖邊緣的距離，單位：像素。格式為[上，右，下，左]，Android上只能識別數組第一項，上下左右的padding一致。開發者工具暫不支持padding參數。
success	Function	-	否	接口調用成功的回呼函數
fail	Function	-	否	接口調用失敗的回呼函數
complete	Function	-	否	接口調用結束的回呼函數（無論成功與否都執行）

points結構内容

結構内容	類型	預設值	必填	說明
longitude	number	-	是	經度
latitude	number	-	是	緯度

.initMarkerCluster

TIP

該API使用方法為： MapContext.moveAlong(Object object)

功能說明： 初始化點聚合的配置，未調用時採用默認配置。

參數及說明： Object object

内容	類型	預設值	必填	說明
enableDefaultStyle	boolean	true	否	啟用默認的聚合樣式
zoomOnClick	boolean	true	否	點擊已經聚合的標記點時是否實現聚合分離
gridSize	number	60	否	聚合算灋的可聚合距離，即距離小於該值的點會聚合至一起，以點數為單位
success	Function	-	否	接口調用成功的回呼函數
fail	Function	-	否	接口調用失敗的回呼函數
complete	Function	-	否	接口調用結束的回呼函數（無論成功與否都執行）

.moveAlong

TIP

該API使用方法為： MapContext.initMarkerCluster(Object object)

功能說明： 沿指定路徑移動marker，用於軌跡重播等場景。動畫完成時觸發回檔事件，若動畫進行中，對同一marker再次調用moveAlong方法，前一次的動畫將被打斷。

參數及說明： Object object

内容	類型	預設值	必填	說明
markerId	number	-	是	指定marker
path	array	-	是	移動路徑的座標串，座標點格式 {longitude, latitude}
autoRotate	boolean	true	否	根據路徑方向自動改變marker的旋轉角度
duration	number	-	是	平滑移動的時間
success	Function	-	否	接口調用成功的回呼函數
fail	Function	-	否	接口調用失敗的回呼函數
complete	Function	-	否	接口調用結束的回呼函數（無論成功與否都執行）

.moveToLocation

TIP

該API使用方法為： MapContext.moveToLocation(Object object)

功能說明： 將地圖中心移至當前定位點，此時需設定地圖組件show-location為true。

參數及說明： Object object

内容	類型	預設值	必填	說明
longitude	number	-	否	經度
latitude	number	-	否	緯度
success	Function	-	否	接口調用成功的回呼函數
fail	Function	-	否	接口調用失敗的回呼函數
complete	Function	-	否	接口調用結束的回呼函數（無論成功與否都執行）

.on

TIP

該API使用方法為： MapContext.on(string event, function callback)

功能說明： 監聽地圖事件
參數1: visualLayerEvent，視覺化圖層visualLayer統一回檔出口，1.5.16起支持。
參數類型說明
layerId String 圖層id
eventType String 事件類型
eventInfo String 事件資訊
參數2: markerClusterCreate，縮放或拖動導致新的聚合簇產生時觸發，僅返回新創建的聚合簇資訊。
參數類型說明
clusters Array<ClusterInfo> 聚合簇數據
參數3: markerClusterClick, 聚合簇的點擊事件。
參數類型說明
cluster ClusterInfo 聚合簇
- ClusterInfo結構
參數類型說明
clusterId Number 聚合簇的id
center LatLng 聚合簇的座標
markerIds Array<Number> 該聚合簇內的點標記數據數組
參數4: string event, 事件名；; function callback，事件的回呼函數。
- event合法值有： markerClusterCreate、markerClusterClick、visualLayerEvent。
示例代碼：

參數	類型	說明
layerId	String	圖層id
eventType	String	事件類型
eventInfo	String	事件資訊

參數	類型	說明
clusters	Array<ClusterInfo>	聚合簇數據

參數	類型	說明
cluster	ClusterInfo	聚合簇

參數	類型	說明
clusterId	Number	聚合簇的id
center	LatLng	聚合簇的座標
markerIds	Array<Number>	該聚合簇內的點標記數據數組

MapContext.on('visualLayerEvent', (res) => {})
MapContext.on('markerClusterCreate', (res) => {})
MapContext.on('markerClusterClick', (res) => {})

.openMapApp

TIP

該API使用方法為： MapContext.openMapApp(Object object)

功能說明： 拉起地圖App選擇導航。

參數及說明： Object object

内容	類型	預設值	必填	說明
longitude	number	-	是	目的地經度
latitude	number	-	是	目的地緯度
destination	string	-	是	目的地名稱
success	Function	-	否	接口調用成功的回呼函數
fail	Function	-	否	接口調用失敗的回呼函數
complete	Function	-	否	接口調用結束的回呼函數（無論成功與否都執行）

.removeArc

TIP

該API使用方法為： MapContext.removeArc(Object object)

TIP

支持度：不支持

功能說明： 删除弧線。

參數及說明： Object object

内容	類型	預設值	必填	說明
id	number	-	是	圓弧id
success	Function	-	否	接口調用成功的回呼函數
fail	Function	-	否	接口調用失敗的回呼函數
complete	Function	-	否	接口調用結束的回呼函數（無論成功與否都執行）

.removeCustomLayer

TIP

該API使用方法為： MapContext.removeCustomLayer(Object object)

TIP

支持度：不支持

功能說明： 移除個性化圖層。

參數及說明： Object object

内容	類型	預設值	必填	說明
layerId	string	-	是	個性化圖層id
success	Function	-	否	接口調用成功的回呼函數
fail	Function	-	否	接口調用失敗的回呼函數
complete	Function	-	否	接口調用結束的回呼函數（無論成功與否都執行）

.removeGroundOverlay

TIP

該API使用方法為： MapContext.removeGroundOverlay(Object object)

TIP

支持度：IDE支持，安卓和ios不支持

功能說明： 移除自定義圖片圖層

參數及說明： Object object

内容	類型	預設值	必填	說明
id	string	-	是	圖片圖層id
success	Function	-	否	接口調用成功的回呼函數
fail	Function	-	否	接口調用失敗的回呼函數
complete	Function	-	否	接口調用結束的回呼函數（無論成功與否都執行）

.removeMarkers

TIP

該API使用方法為： MapContext.removeMarkers(Object object)

功能說明： 移除marker。

參數及說明： Object object

内容	類型	預設值	必填	說明
markerIds	array	-	是	marker的id集合
success	Function	-	否	接口調用成功的回呼函數
fail	Function	-	否	接口調用失敗的回呼函數
complete	Function	-	否	接口調用結束的回呼函數（無論成功與否都執行）

.setBoundary

TIP

該API使用方法為： MapContext.setBoundary(Object object)

功能說明： 限制地圖的顯示範圍。此接口同時會限制地圖的最小縮放整數級別。

參數及說明： Object object

内容	類型	預設值	必填	說明
southwest	Object	-	是	西南角經緯度
northeast	Object	-	是	東北角經緯度
success	Function	-	否	接口調用成功的回呼函數
fail	Function	-	否	接口調用失敗的回呼函數
complete	Function	-	否	接口調用結束的回呼函數（無論成功與否都執行）

southwest結構内容
結構内容類型預設值必填說明
longitude number - 是經度
latitude number - 是緯度
northeast結構内容
結構内容類型預設值必填說明
longitude number - 是經度
latitude number - 是緯度

.setCenterOffset

TIP

該API使用方法為： MapContext.setCenterOffset(Object object)

功能說明： 設定地圖中心點偏移，向後向下為增長，螢幕比例範圍（0.25~0.75），默認偏移為[0.5，0.5]。

參數及說明： Object object

内容	類型	預設值	必填	說明
offset	Array.<`number`>	-	是	偏移量，兩位數組
success	Function	-	否	接口調用成功的回呼函數
fail	Function	-	否	接口調用失敗的回呼函數
complete	Function	-	否	接口調用結束的回呼函數（無論成功與否都執行）

.setLocMarkerIcon

TIP

該API使用方法為： MapContext.setLocMarkerIcon(Object object)

功能說明： 設定定位點圖標，支持網絡路徑、本地路徑、代碼包路徑。

參數及說明： Object object

内容	類型	預設值	必填	說明
iconPath	string	-	是	圖標路徑，支持網絡路徑、本地路徑、代碼包路徑
success	Function	-	否	接口調用成功的回呼函數
fail	Function	-	否	接口調用失敗的回呼函數
complete	Function	-	否	接口調用結束的回呼函數（無論成功與否都執行）

.toScreenLocation

TIP

該API使用方法為： MapContext.toScreenLocation(Object object)

功能說明： 獲取經緯度對應的荧幕座標，座標原點為地圖左上角。

參數及說明： Object object

内容	類型	預設值	必填	說明
longitude	number	-	是	經度
latitude	number	-	是	緯度
success	Function	-	否	接口調用成功的回呼函數
fail	Function	-	否	接口調用失敗的回呼函數
complete	Function	-	否	接口調用結束的回呼函數（無論成功與否都執行）

object.success回呼函數參數： Object res。
内容類型說明
x number x座標值
y number y座標值

内容	類型	說明
x	number	x座標值
y	number	y座標值

.translateMarker

TIP

該API使用方法為： MapContext.translateMarker(Object object)

功能說明： 平移marker，iOS以及IDE支持動畫效果，Android平臺暫不支持。

參數及說明： Object object

内容	類型	預設值	必填	說明
markerId	number	-	是	指定marker
destination	object	-	是	指定marker移動到的目標點
animationEnd	function	-	否	動畫結束回呼函數
success	Function	-	否	接口調用成功的回呼函數
fail	Function	-	否	接口調用失敗的回呼函數
complete	Function	-	否	接口調用結束的回呼函數（無論成功與否都執行）

destination結構内容
結構内容類型預設值必填說明
longitude number - 是經度
latitude number - 是緯度

.updateGroundOverlay

TIP

該API使用方法為： MapContext.updateGroundOverlay(Object object)

TIP

支持度：IDE支持，安卓和ios不支持

功能說明： 更新自定義圖片圖層。

參數及說明： Object object

内容	類型	預設值	必填	說明
id	String	-	是	圖片圖層id
src	String	-	是	圖片路徑，支持網絡圖片、臨時路徑、代碼包路徑
bounds	Object	-	是	圖片覆蓋的經緯度範圍
visible	Boolean	true	否	是否可見
zIndex	Number	1	否	圖層繪製順序
opacity	Number	1	否	圖層透明度
success	Function	-	否	接口調用成功的回呼函數
fail	Function	-	否	接口調用失敗的回呼函數
complete	Function	-	否	接口調用結束的回呼函數（無論成功與否都執行）

bounds的結構内容
結構内容類型預設值必填說明
southwest Object - 是西南角經緯度
northeast Object - 是東北角經緯度
- southwest結構内容
  結構内容類型預設值必填說明
  longitude number - 是經度
  latitude number - 是緯度
- northeast結構内容
  結構内容類型預設值必填說明
  longitude number - 是經度
  latitude number - 是緯度

地圖 ​

createMapContext ​

MapContext ​

.addArc ​

.addCustomLayer ​

.addGroundOverlay ​

.addMarkers ​

.eraseLines ​

.fromScreenLocation ​

.getCenterLocation ​

.getRegion ​

.getRotate ​

.getScale ​

.getSkew ​

.includePoints ​

.initMarkerCluster ​

.moveAlong ​

.moveToLocation ​

.on ​

.openMapApp ​

.removeArc ​

.removeCustomLayer ​

.removeGroundOverlay ​

.removeMarkers ​

.setBoundary ​

.setCenterOffset ​

.setLocMarkerIcon ​

.toScreenLocation ​

.translateMarker ​

.updateGroundOverlay ​

地圖

createMapContext

MapContext

.addArc

.addCustomLayer

.addGroundOverlay

.addMarkers

.eraseLines

.fromScreenLocation

.getCenterLocation

.getRegion

.getRotate

.getScale

.getSkew

.includePoints

.initMarkerCluster

.moveAlong

.moveToLocation

.on

.openMapApp

.removeArc

.removeCustomLayer

.removeGroundOverlay

.removeMarkers

.setBoundary

.setCenterOffset

.setLocMarkerIcon

.toScreenLocation

.translateMarker

.updateGroundOverlay