微信小程序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)記點
covers	Array		即將移除，請使用 markers
polyline	Array		路線
polygons	Array		多邊形	2.3.0
circles	Array		圓
controls	Array		控件（即將廢棄，建議使用 cover-view 代替）
include-points	Array		縮放視野以包含所有給定的坐標(biāo)點
show-location	Boolean		顯示帶有方向的當(dāng)前定位點
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		點擊標(biāo)記點時觸發(fā)，會返回marker的id
bindcallouttap	EventHandle		點擊標(biāo)記點對應(yīng)的氣泡時觸發(fā)，會返回marker的id	1.2.0
bindcontroltap	EventHandle		點擊控件時觸發(fā)，會返回control的id
bindregionchange	EventHandle		視野發(fā)生變化時觸發(fā)	2.3.0起增加causedBy 參數(shù)區(qū)分拖動、縮放和調(diào)用接口等來源
bindtap	EventHandle		點擊地圖時觸發(fā)
bindupdated	EventHandle		在地圖渲染更新完成時觸發(fā)	1.6.0
bindpoitap	EventHandle		點擊地圖poi點時觸發(fā)	2.3.0

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

markers

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

屬性	說明	類型	必填	備注	最低版本
id	標(biāo)記點id	Number	否	marker點擊事件回調(diào)會返回此id。建議為每個marker設(shè)置上Number類型id，保證更新marker時有更好的性能。
latitude	緯度	Number	是	浮點數(shù)，范圍 -90 ~ 90
longitude	經(jīng)度	Number	是	浮點數(shù)，范圍 -180 ~ 180
title	標(biāo)注點名	String	否
zIndex	顯示層級	Number	否		2.3.0
iconPath	顯示的圖標(biāo)	String	是	項目目錄下的圖片路徑，支持相對路徑寫法，以'/'開頭則表示相對小程序根目錄；也支持臨時路徑和網(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)為圖片實際寬度
height	標(biāo)注圖標(biāo)高度	Number	否	默認(rèn)為圖片實際高度
callout	自定義標(biāo)記點上方的氣泡窗口	Object	否	支持的屬性見下表，可識別換行符。	1.2.0
label	為標(biāo)記點旁邊增加標(biāo)簽	Object	否	支持的屬性見下表，可識別換行符。	1.2.0
anchor	經(jīng)緯度在標(biāo)注圖標(biāo)的錨點，默認(rèn)底邊中點	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	邊框?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':點擊顯示; '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)，原點是 marker 對應(yīng)的經(jīng)緯度	Number	2.1.0
anchorY	label的坐標(biāo)，原點是 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)點，從數(shù)組第一項連線至最后一項

屬性	說明	類型	必填	備注	最低版本
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)點，根據(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	是	浮點數(shù)，范圍 -90 ~ 90
longitude	經(jīng)度	Number	是	浮點數(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ào)會返回此id
position	控件在地圖的位置	Object	是	控件相對地圖位置
iconPath	顯示的圖標(biāo)	String	是	項目目錄下的圖片路徑，支持相對路徑寫法，以'/'開頭則表示相對小程序根目錄；也支持臨時路徑
clickable	是否可點擊	Boolean	否	默認(rè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