微信小程序MAP地圖插件

日期：2018-09-12　作者：管理員　來源：本站

微信小程序MAP地圖插件是原生組件中的個性化地圖【小程序插件定制開發電話】為豐富小程序地圖服務的使用場景，小程序地圖組件新增個性化底圖樣式，小程序開發者可通過開通騰訊位置服務更換小程序地圖樣式，使用時請注意微信小程序MAP地圖插件相關限制，個性化地圖能力可在小程序后臺“設置-開發者工具-騰訊地圖服務”申請開通，設置subkey后，小程序內的地圖組件均會使用該底圖效果，底圖場景的切換會在后續版本提供。

微信小程序MAP地圖插件

微信小程序MAP地圖插件

屬性名	類型	默認值	說明	最低版本
longitude	Number		中心經度
latitude	Number		中心緯度
scale	Number	16	縮放級別，取值范圍為5-18
markers	Array		標記點
covers	Array		即將移除，請使用 markers
polyline	Array		路線
polygons	Array		多邊形	2.3.0
circles	Array		圓
controls	Array		控件（即將廢棄，建議使用 cover-view 代替）
include-points	Array		縮放視野以包含所有給定的坐標點
show-location	Boolean		顯示帶有方向的當前定位點
subkey	String	''	個性化地圖使用的key，僅初始化地圖時有效	2.3.0
enable-3D	Boolean	false	展示3D樓塊(工具暫不支持）	2.3.0
show-compass	Boolean	false	顯示指南針	2.3.0
enable-overlooking	Boolean	false	開啟俯視	2.3.0
enable-zoom	Boolean	true	是否支持縮放	2.3.0
enable-scroll	Boolean	true	是否支持拖動	2.3.0
enable-rotate	Boolean	false	是否支持旋轉	2.3.0
bindmarkertap	EventHandle		點擊標記點時觸發，會返回marker的id
bindcallouttap	EventHandle		點擊標記點對應的氣泡時觸發，會返回marker的id	1.2.0
bindcontroltap	EventHandle		點擊控件時觸發，會返回control的id
bindregionchange	EventHandle		視野發生變化時觸發	2.3.0起增加causedBy 參數區分拖動、縮放和調用接口等來源
bindtap	EventHandle		點擊地圖時觸發
bindupdated	EventHandle		在地圖渲染更新完成時觸發	1.6.0
bindpoitap	EventHandle		點擊地圖poi點時觸發	2.3.0

注意: covers 屬性即將移除，請使用 markers 替代

markers

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

屬性	說明	類型	必填	備注	最低版本
id	標記點id	Number	否	marker點擊事件回調會返回此id。建議為每個marker設置上Number類型id，保證更新marker時有更好的性能。
latitude	緯度	Number	是	浮點數，范圍 -90 ~ 90
longitude	經度	Number	是	浮點數，范圍 -180 ~ 180
title	標注點名	String	否
zIndex	顯示層級	Number	否		2.3.0
iconPath	顯示的圖標	String	是	項目目錄下的圖片路徑，支持相對路徑寫法，以'/'開頭則表示相對小程序根目錄；也支持臨時路徑和網絡圖片（2.3.0）
rotate	旋轉角度	Number	否	順時針旋轉的角度，范圍 0 ~ 360，默認為 0
alpha	標注的透明度	Number	否	默認1，無透明，范圍 0 ~ 1
width	標注圖標寬度	Number	否	默認為圖片實際寬度
height	標注圖標高度	Number	否	默認為圖片實際高度
callout	自定義標記點上方的氣泡窗口	Object	否	支持的屬性見下表，可識別換行符。	1.2.0
label	為標記點旁邊增加標簽	Object	否	支持的屬性見下表，可識別換行符。	1.2.0
anchor	經緯度在標注圖標的錨點，默認底邊中點	Object	否	{x, y}，x表示橫向(0-1)，y表示豎向(0-1)。{x: .5, y: 1} 表示底邊中點	1.2.0

marker 上的氣泡 callout

屬性	說明	類型	最低版本
content	文本	String	1.2.0
color	文本顏色	String	1.2.0
fontSize	文字大小	Number	1.2.0
borderRadius	邊框圓角	Number	1.2.0
borderWidth	邊框寬度	Number	2.3.0
borderColor	邊框顏色	String	2.3.0
bgColor	背景色，2.3.0開始支持RGBA透明度	String	1.2.0
padding	文本邊緣留白	Number	1.2.0
display	'BYCLICK':點擊顯示; 'ALWAYS':常顯	String	1.2.0
textAlign	文本對齊方式。有效值: left, right, center	String	1.6.0

marker 上的氣泡 label

屬性	說明	類型	最低版本
content	文本	String	1.2.0
color	文本顏色	String	1.2.0
fontSize	文字大小	Number	1.2.0
x	label的坐標（廢棄）	Number	1.2.0
y	label的坐標（廢棄）	Number	1.2.0
anchorX	label的坐標，原點是 marker 對應的經緯度	Number	2.1.0
anchorY	label的坐標，原點是 marker 對應的經緯度	Number	2.1.0
borderWidth	邊框寬度	Number	1.6.0
borderColor	邊框顏色	String	1.6.0
borderRadius	邊框圓角	Number	1.6.0
bgColor	背景色	String	1.6.0
padding	文本邊緣留白	Number	1.6.0
textAlign	文本對齊方式。有效值: left, right, center	String	1.6.0

polyline

指定一系列坐標點，從數組第一項連線至最后一項

屬性	說明	類型	必填	備注	最低版本
points	經緯度數組	Array	是	[{latitude: 0, longitude: 0}]
color	線的顏色	String	否	8位十六進制表示，后兩位表示alpha值，如：#000000AA
width	線的寬度	Number	否
dottedLine	是否虛線	Boolean	否	默認false
arrowLine	帶箭頭的線	Boolean	否	默認false，開發者工具暫不支持該屬性	1.2.0
arrowIconPath	更換箭頭圖標	String	否	在arrowLine為true時生效	1.6.0
borderColor	線的邊框顏色	String	否		1.2.0
borderWidth	線的厚度	Number	否		1.2.0

polygons

指定一系列坐標點，根據 points 坐標數據生成閉合多邊形，最低版本2.3.0

屬性	說明	類型	必填	備注
points	經緯度數組	Array	是	[{latitude: 0, longitude: 0}]
strokeWidth	描邊的寬度	Number	否
strokeColor	描邊的顏色	String	否	8位十六進制表示，后兩位表示alpha值，如：#000000AA
fillColor	填充顏色	String	否	8位十六進制表示，后兩位表示alpha值，如：#000000AA
zIndex	設置多邊形Z軸數值	Number	否

circles

在地圖上顯示圓

屬性	說明	類型	必填	備注
latitude	緯度	Number	是	浮點數，范圍 -90 ~ 90
longitude	經度	Number	是	浮點數，范圍 -180 ~ 180
color	描邊的顏色	String	否	8位十六進制表示，后兩位表示alpha值，如：#000000AA
fillColor	填充顏色	String	否	8位十六進制表示，后兩位表示alpha值，如：#000000AA
radius	半徑	Number	是
strokeWidth	描邊的寬度	Number	否

controls

在地圖上顯示控件，控件不隨著地圖移動。即將廢棄，請使用 cover-view

屬性	說明	類型	必填	備注
id	控件id	Number	否	在控件點擊事件回調會返回此id
position	控件在地圖的位置	Object	是	控件相對地圖位置
iconPath	顯示的圖標	String	是	項目目錄下的圖片路徑，支持相對路徑寫法，以'/'開頭則表示相對小程序根目錄；也支持臨時路徑
clickable	是否可點擊	Boolean	否	默認不可點擊

position

屬性	說明	類型	必填	備注
left	距離地圖的左邊界多遠	Number	否	默認為0
top	距離地圖的上邊界多遠	Number	否	默認為0
width	控件寬度	Number	否	默認為圖片寬度
height	控件高度	Number	否	默認為圖片高度

地圖組件的經緯度必填, 如果不填經緯度則默認值是北京的經緯度。

示例：

在開發者工具中預覽效果

<!-- map.wxml --> <map id="map" longitude="113.324520" latitude="23.099994" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 300px;"></map>

// map.js Page({ data: { markers: [{ iconPath: "/resources/others.png", id: 0, latitude: 23.099994, longitude: 113.324520, width: 50, height: 50 }], polyline: [{ points: [{ longitude: 113.3245211, latitude: 23.10229 }, { longitude: 113.324520, latitude: 23.21229 }], color:"#FF0000DD", width: 2, dottedLine: true }], controls: [{ id: 1, iconPath: '/resources/location.png', position: { left: 0, top: 300 - 50, width: 50, height: 50 }, clickable: true }]
  },
  regionchange(e) { console.log(e.type)
  },
  markertap(e) { console.log(e.markerId)
  },
  controltap(e) { console.log(e.controlId)
  }
})

相關api：wx.createMapContext