微信小程序MAP地圖插件

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

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

微信小程序MAP地圖插件

微信小程序MAP地圖插件

屬性名	類型	默認(rèn)值	說明	最低版本
longitude	Number		中心經(jīng)度
latitude	Number		中心緯度
scale	Number	16	縮放級別，取值范圍為5-18
markers	Array		標(biāo)記點(diǎn)
covers	Array		即將移除，請使用 markers
polyline	Array		路線
polygons	Array		多邊形	2.3.0
circles	Array		圓
controls	Array		控件（即將廢棄，建議使用 cover-view 代替）
include-points	Array		縮放視野以包含所有給定的坐標(biāo)點(diǎn)
show-location	Boolean		顯示帶有方向的當(dāng)前定位點(diǎn)
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	是否支持旋轉(zhuǎn)	2.3.0
bindmarkertap	EventHandle		點(diǎn)擊標(biāo)記點(diǎn)時觸發(fā)，會返回marker的id
bindcallouttap	EventHandle		點(diǎn)擊標(biāo)記點(diǎn)對應(yīng)的氣泡時觸發(fā)，會返回marker的id	1.2.0
bindcontroltap	EventHandle		點(diǎn)擊控件時觸發(fā)，會返回control的id
bindregionchange	EventHandle		視野發(fā)生變化時觸發(fā)	2.3.0起增加causedBy 參數(shù)區(qū)分拖動、縮放和調(diào)用接口等來源
bindtap	EventHandle		點(diǎn)擊地圖時觸發(fā)
bindupdated	EventHandle		在地圖渲染更新完成時觸發(fā)	1.6.0
bindpoitap	EventHandle		點(diǎn)擊地圖poi點(diǎn)時觸發(fā)	2.3.0

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

markers

標(biāo)記點(diǎn)用于在地圖上顯示標(biāo)記的位置

屬性	說明	類型	必填	備注	最低版本
id	標(biāo)記點(diǎn)id	Number	否	marker點(diǎn)擊事件回調(diào)會返回此id。建議為每個marker設(shè)置上Number類型id，保證更新marker時有更好的性能。
latitude	緯度	Number	是	浮點(diǎn)數(shù)，范圍 -90 ~ 90
longitude	經(jīng)度	Number	是	浮點(diǎn)數(shù)，范圍 -180 ~ 180
title	標(biāo)注點(diǎn)名	String	否
zIndex	顯示層級	Number	否		2.3.0
iconPath	顯示的圖標(biāo)	String	是	項(xiàng)目目錄下的圖片路徑，支持相對路徑寫法，以'/'開頭則表示相對小程序根目錄；也支持臨時路徑和網(wǎng)絡(luò)圖片（2.3.0）
rotate	旋轉(zhuǎn)角度	Number	否	順時針旋轉(zhuǎn)的角度，范圍 0 ~ 360，默認(rèn)為 0
alpha	標(biāo)注的透明度	Number	否	默認(rèn)1，無透明，范圍 0 ~ 1
width	標(biāo)注圖標(biāo)寬度	Number	否	默認(rèn)為圖片實(shí)際寬度
height	標(biāo)注圖標(biāo)高度	Number	否	默認(rèn)為圖片實(shí)際高度
callout	自定義標(biāo)記點(diǎn)上方的氣泡窗口	Object	否	支持的屬性見下表，可識別換行符。	1.2.0
label	為標(biāo)記點(diǎn)旁邊增加標(biāo)簽	Object	否	支持的屬性見下表，可識別換行符。	1.2.0
anchor	經(jīng)緯度在標(biāo)注圖標(biāo)的錨點(diǎn)，默認(rèn)底邊中點(diǎn)	Object	否	{x, y}，x表示橫向(0-1)，y表示豎向(0-1)。{x: .5, y: 1} 表示底邊中點(diǎn)	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	邊框?qū)挾?/td>	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':點(diǎn)擊顯示; '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的坐標(biāo)（廢棄）	Number	1.2.0
y	label的坐標(biāo)（廢棄）	Number	1.2.0
anchorX	label的坐標(biāo)，原點(diǎn)是 marker 對應(yīng)的經(jīng)緯度	Number	2.1.0
anchorY	label的坐標(biāo)，原點(diǎn)是 marker 對應(yīng)的經(jīng)緯度	Number	2.1.0
borderWidth	邊框?qū)挾?/td>	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

指定一系列坐標(biāo)點(diǎn)，從數(shù)組第一項(xiàng)連線至最后一項(xiàng)

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

polygons

指定一系列坐標(biāo)點(diǎn)，根據(jù) points 坐標(biāo)數(shù)據(jù)生成閉合多邊形，最低版本2.3.0

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

circles

在地圖上顯示圓

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

controls

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

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

position

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

地圖組件的經(jīng)緯度必填, 如果不填經(jīng)緯度則默認(rèn)值是北京的經(jīng)緯度。

示例：

在開發(fā)者工具中預(yù)覽效果

<!-- 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)
  }
})

相關(guān)api：wx.createMapContext