地圖組件
map
功能說明：地圖，該組件是 原生組件 ，使用時請注意相關限制，相關API可參見 wx.createMapContext
支持度說明：：
系統地圖：僅iOS支持。
穀歌地圖：Android支持、IDE支持。
華為地圖：僅Android支持。
騰訊地圖：IOS支持、Android支持、IDE支持。
參數及說明：
| 内容 | 類型 | 預設值 | 必填 | 說明 | iOS支持度 | Android支持度 | IDE支持度 |
|---|---|---|---|---|---|---|---|
| type | string | tencent | 否 | 地圖類型，tencent或google | 否 | 否 | 是 |
| longitude | number | - | 是 | 中心經度 | 是 | 是 | 是 |
| latitude | number | - | 是 | 中心緯度 | 是 | 是 | 是 |
| scale | number | 16 | 否 | 縮放級別，取值範圍為3～20 | 是 | 是 | 是 |
| min-scale | number | 3 | 否 | 最小縮放級別 | 是 | 是 | |
| max-scale | number | 20 | 否 | 最大縮放級別 | 是 | 是 | |
| markers | array.marker | - | 否 | 標記點 | 是 | 是 | 是 |
| polyline | array.polyline | - | 否 | 路線 | 是 | 是 | 是 |
| circles | array.circle | - | 否 | 圓 | 是 | 是 | 是 |
| controls | Array.control | - | 否 | 控制項（即將廢棄，建議使用cover-view代替） | 否 | 否 | 否 |
| include-points | array.point | - | 否 | 縮放視野以包含所有給定的座標點 | 是 | 是 | 是 |
| show-location | boolean | false | 否 | 顯示帶有方向的當前定位點 | 是 | 是 | 是 |
| polygons | array.polygon | - | 否 | 多邊形 | 是 | 是 | 是 |
| subkey | string | - | 否 | 個性化地圖使用的key | 否 | 否 | 是 |
| layer-style | number | 1 | 否 | 地圖能力【個性化地圖】配置的style | 否 | 否 | 否 |
| rotate | number | 0 | 否 | 旋轉角度，範圍0～360，地圖正北與設備y軸的夾角角度 | 否 | 是 | 否 |
| skew | number | 0 | 否 | 傾斜角度，範圍0 ~ 40，關於z軸的傾角 | 系統地圖：否 騰訊地圖：是 百度地圖：是 高德地圖：是 | 是 | 否 |
| enable-3D | boolean | false | 否 | 展示3D樓塊 | 系統地圖：否 騰訊地圖：是 百度地圖：否 高德地圖：否 | 穀歌地圖：是 華為地圖：是 騰訊地圖：是 百度地圖：是 高德地圖：否 | 否 |
| show-compass | boolean | false | 否 | 顯示指南針 | 是 | 是 | 否 |
| show-scale | boolean | false | 否 | 顯示比例尺 | 是 | 穀歌地圖：否 華為地圖：否 騰訊地圖：是 百度地圖：是 高德地圖：是 | 是 |
| enable-overlooking | boolean | false | 否 | 開啟俯視 | 系統地圖：否 騰訊地圖：是 百度地圖：是 高德地圖：是 | 是 | 否 |
| enable-zoom | boolean | true | 否 | 是否支持縮放 | 視圖容器。 | 視圖容器。 | 是 |
| enable-scroll | boolean | true | 否 | 是否支持拖動 | 視圖容器。 | 是 | 是 |
| enable-rotate | boolean | - | 否 | 是否支持旋轉 | 是 | 是 | 否 |
| enable-satellite | boolean | false | 否 | 是否開啟衛星圖 | 是 | 穀歌地圖：是 華為地圖：否 騰訊地圖：是 百度地圖：是 高德地圖：是 | 是 type=google |
| enable-traffic | boolean | false | 否 | 是否開啟實时路况 | 是 | 是 | 是 |
| enable-poi | boolean | true | 否 | 是否展示POI點 | 系統地圖：否 騰訊地圖：是 百度地圖：是 高德地圖：否 | 穀歌地圖：是 否 騰訊地圖：是 百度地圖：是 高德地圖：是 | 視圖容器。 type=google |
| enable-building | boolean | false | 否 | 是否展示建築物 | 系統地圖：否 系統地圖：是 騰訊地圖：否 騰訊地圖：是 | icon的類型，有效值： success，success_no_circle，info，warn，waiting，cancel，download，search，clear | 視圖容器。 type=google |
| setting | object | - | 否 | 配置項 | 否 | 否 | 是 |
| bindtap | eventhandle | - | 否 | 按一下地圖時觸發，返回經緯度資訊 | 是 | 是 | 是 |
| bindlabeltap | eventhandle | - | 否 | 點擊標記點時觸發 e.detail = {markerId} | 是 | 是 | 是 |
| bindmarkertap | eventhandle | - | 否 | 點選 label 時觸發，e.detail = {markerId} | 是 | 否 | 是 type=tencent |
| bindcontroltap | eventhandle | - | 否 | 點選控制項時觸發，e.detail = {controlId} | 否 | 否 | 否 |
| bindcallouttap | eventhandle | - | 否 | 點擊標記點對應的氣泡時觸發 e.detail = {markerId} | 否 | 否 | 是 |
| bindupdated | eventhandle | - | 否 | 在地圖渲染更新完成時觸發 | 是 | 是 | 是 |
| bindregionchange | eventhandle | - | 否 | 視野發生變化時觸發 | 是 | 是 | 是 |
| bindpoitap | eventhandle | - | 否 | 點擊地圖 poi 點時觸發 e.detail = {name, longitude, latitude} | 否 | 是 | 是 |
| bindanchorpointtap | eventhandle | - | 否 | 點選定位標時觸發，e.detail = {longitude, latitude} | 否 | 否 | 否 |
TIP
- 地圖中的顏色值color/borderColor/bgColor等需使用6位（8位）十六進位表示，8比特時後兩位表示alpha值，如：# 000000AA。
- 地圖組件的經緯度必填。
- map組件使用的經緯度是火星坐標系，調用wx.getLocation接口需要指定type為gcj02。
regionchange 返回值：
視野改變時，regionchange會觸發兩次，返回的type值分別為begin和end。
- begin階段返回causedBy：有效值為gesture（手勢觸發）、update（接口觸發）。
- end階段返回causedBy：有效值為drag（拖動導致）、scale（縮放導致）、update（調用更新接口導致）。
js
e = {
causedBy,
type,
detail: { rotate, skew, scale, centerLocation, region },
};setting
提供setting對象統一設定地圖配置。 同時對於一些動畫内容如rotate和skew，通過setData分開設定時無法同時生效，需通過settting統一修改。
js
// Default values
const setting = {
rotate: 0,
showLocation: false,
subKey: "",
layerStyle: 1,
enableZoom: true,
enableScroll: true,
enableRotate: false,
showCompass: false,
enableSatellite: false,
};
this.setData({
// Changes only affect the properties involved in the setting object; other properties remain unaffected.
setting: {
enableZoom: false,
enableScroll: false,
},
});marker
標記點，用於在地圖上顯示標記的位置。
内容
類型
預設值
必填
說明
iOS支持度
Android支持度
IDE支持度
id
標記點id
number
否
marker點擊事件回檔會返回此id。 建議為每個marker設定ID，保證更新marker時有更好的效能。
是
是
是
clusterId
聚合簇的id
number
否
自定義點聚合簇效果時使用
否
否
否
joinCluster
是否參與點聚合
boolean
否
默認不參與點聚合
否
穀歌地圖：是
華為地圖：是
騰訊地圖：是
百度地圖：是
高德地圖：否
華為地圖：是
騰訊地圖：是
百度地圖：是
高德地圖：否
否
latitude
緯度
number
是
浮點數，範圍-90 ~ 90
是
是
是
longitude
經度
number
是
浮點數，範圍-90 ~ 90
是
是
是
title
標注點名
string
否
點擊時顯示，callout存在時將被忽略
是
是
是 type=tencent
zIndex
顯示層級
number
否
-
否
是
是
iconPath
顯示的圖標
string
是
項目目錄下的圖片路徑，支持網絡路徑、本地路徑、代碼包路徑
是
是
是
rotate
旋轉角度
number
否
順時針旋轉的角度，範圍0~360，默認為0
否
是
是ype=tencent
alpha
標注的透明度
number
否
默認1，無透明，範圍0~1
否
是
是ype=tencent
width
標注圖標寬度
number/string
否
默認為圖片實際寬度
否
是
否
height
標注圖標高度
number/string
否
默認為圖片實際高度
否
是
否
callout
標記點上方的氣泡視窗
object
否
支持的内容見下錶，可識別分行符號
是
是
是
customCallout
自定義氣泡視窗
object
否
支持的内容見下錶
否
否
否
label
為標記點旁邊新增標籤
object
否
支持的内容見下錶，可識別分行符號
否
否
是
anchor
經緯度在標注圖標的錨點，默認底邊中點
object
否
{x, y}，x 表示橫向(0-1)，y 表示垂直(0-1)。 {x: .5, y: 1} 表示底邊中點
否
是
否
marker上的氣泡callout
内容
說明
類型
iOS支持度
Android支持度
IDE支持度
content
文字
string
是
是
是
color
文字顏色
string
否
是
是
fontSize
文字大小
number
否
是
是
borderRadius
邊框圓角
number
否
是
是
borderWidth
邊框寬度
number
否
是
是
borderColor
邊框顏色
string
否
是
是
bgColor
背景色
string
否
是
是
padding
文字編譯留白
number
否
是
是
display
BYCLICK'：點擊顯示；' ALWAYS': 常顯
string
否
否
是
textAlign
文字對齊管道。 有效值： left, right, center
string
否
是
否
anchorX
橫向偏移量，向右為正數
number
否
穀歌地圖：是
華為地圖：是
騰訊地圖：是
百度地圖：否
高德地圖：是
否
anchorY
縱向偏移量，向下為正數
number
否
穀歌地圖：是
華為地圖：是
騰訊地圖：是
百度地圖：否
高德地圖：是
否
marker上的自定義氣泡customCallout
customCallout存在時將忽略callout與title内容。 自定義氣泡採用cover-view定制，靈活度更高。
内容
類型
預設值
iOS支持度
Android支持度
IDE支持度
display
BYCLICK'：點擊顯示；' ALWAYS': 常顯
string
否
否
否
anchorX
橫向偏移量，向右為正數
number
否
否
否
anchorY
縱向偏移量，向下為正數
number
否
否
否
使用管道如下，map組件下添加名為callout的slot節點，其內部的cover-view通過marker-id内容與marker綁定。 當marker創建時，該cover-view顯示的內容將作為callout顯示在標記點上方。
js
<map>
<cover-view slot="callout">
<cover-view marker-id="1"></cover-view>
<cover-view marker-id="2"></cover-view>
</cover-view>
</map>marker上的氣泡label
| 内容 | 類型 | 預設值 | iOS支持度 | Android支持度 | IDE支持度 |
|---|---|---|---|---|---|
| content | 文字 | string | 否 | 否 | 是 |
| color | 文字顏色 | string | 否 | 否 | 是 |
| fontSize | 文字大小 | number | 否 | 否 | 是 |
| anchorX | label的座標，原點是marker對應的經緯度 | number | 否 | 否 | 是 |
| anchorY | label的座標，原點是marker對應的經緯度 | number | 否 | 否 | 是 |
| borderWidth | 邊框寬度 | number | 否 | 否 | 是 |
| borderColor | 邊框顏色 | string | 否 | 否 | 是 |
| borderRadius | 邊框圓角 | number | 否 | 否 | 是 |
| bgColor | 背景色 | string | 否 | 否 | 是 |
| padding | 文字編譯留白 | number | 否 | 否 | 是 |
| textAlign | 文字對齊管道。 有效值： left, right, center | string | 否 | 否 | 是 |
點聚合
功能說明當地圖上需要展示的標記點marker過多時，可能會導致介面上marker出現壓蓋，展示不全，並導致整體效能變差，針對此類問題，推出點聚合能力。
系統地圖（僅iOS支持）
使用流程如下：
- MapContext.addMarkers 指定參與聚合的marker。
- （可選）MapContext.on（'markerClusterCreate'，callback）觸發時，通過 MapContext.addMarkers 更新聚合簇的樣式。
- MapContext.removeMarkers 移除參與聚合的marker。
穀歌地圖（僅Android支持）
使用方法為添加marker時指定joinCluster即可，符合條件的marker將會自動進行聚合。
polyline
- 功能說明指定一系列座標點，從數組第一項連線至最後一項，繪製彩虹線時，需指定不同分段的顏色，如points包含5個點，則colorList應傳入4個顏色值； 若colorList長度小於points.length - 1，則剩下的分段顏色與最後一項保持一致。
内容
類型
預設值
必填
備註
iOS支持度
Android支持度
IDE支持度
points
經緯度數組
Array
是
[{latitude: 0, longitude: 0}]
是
是
是
color
線的顏色
string
否
十六進位
是
是
是
colorList
彩虹線
Array
否
存在時忽略color值
否
穀歌地圖：否
華為地圖：否
騰訊地圖：是
百度地圖：是
高德地圖：是
否
width
線的寬度
number
否
是
是
是
dottedLine
是否虛線
boolean
否
默認false
是
是
是
arrowLine
是否虛線
boolean
否
-
否
是
否
arrowIconPath
更換箭頭圖標
string
否
-
否
是
否
borderColor
線的邊框顏色
string
否
-
否
穀歌地圖：否
華為地圖：否
騰訊地圖：是
百度地圖：否
高德地圖：否
是
borderWidth
線的厚度
number
否
-
否
穀歌地圖：否
華為地圖：否
騰訊地圖：是
百度地圖：否
高德地圖：否
是
level
壓蓋關係
string
否
默認為abovelabels
否
穀歌地圖：否
華為地圖：否
騰訊地圖：是
百度地圖：否
高德地圖：否
否
textStyle
文字樣式
TextStyle
否
折線上文字樣式
否
穀歌地圖：否
華為地圖：否
騰訊地圖：是
百度地圖：否
高德地圖：否
否
segmentTexts
分段文字
Array.SegmentText
否
折線上文字內容和位置
否
穀歌地圖：否
華為地圖：否
騰訊地圖：是
百度地圖：否
高德地圖：否
否
SegmentText
| 内容 | 說明 | 類型 |
|---|---|---|
| name | 名稱 | string |
| startIndex | 起點 | number |
| endIndex | 終點 | number |
TextStyle
| 内容 | 說明 | 類型 | 預設值 |
|---|---|---|---|
| textColor | 文字顏色 | string | #000000 |
| strokeColor | 描邊顏色 | number | #ffffff |
| fontSize | 文字大小 | number | 14 |
| 值 | 說明 |
|---|---|
| abovelabels | 顯示在所有POI之上 |
| abovebuildings | 顯示在樓塊之上POI之下 |
| aboveroads | 顯示在道路之上樓塊之下 |
polygon
- 說明指定一些列座標點，根據points座標數據生成閉合多邊形
内容
說明
預設值
必填
備註
iOS支持度
Android支持度
IDE支持度
dashArray
邊線虛線
Array.number
否
預設值 [0, 0] 為實線，[10, 10]表示十個像素的實線和十個像素的空白（如此反覆）組成的虛線
否
穀歌地圖：否
華為地圖：否
騰訊地圖：是
百度地圖：否
高德地圖：否
否
points
經緯度數組
array
是
[{latitude: 0, longitude: 0}]
是
是
是
strokeWidth
描邊的寬度
number
否
-
是
是
否
strokeColor
描邊的顏色
string
否
十六進位
是
是
否
fillColor
填充顏色
string
否
十六進位
是
是
是
zIndex
設定多邊形Z軸數值
number
否
-
否
是
是
level
壓蓋關係
string
是
默認為abovelabels
否
穀歌地圖：否
華為地圖：否
騰訊地圖：是
百度地圖：否
高德地圖：否
否
circle
- 功能說明： 在地圖上顯示圓
内容
說明
預設值
必填
備註
iOS支持度
Android支持度
IDE支持度
latitude
緯度
number
是
預設值 [0, 0] 為實線，[10, 10]表示十個像素的實線和十個像素的空白（如此反覆）組成的虛線
是
是
是
longitude
經度
number
是
浮點數，範圍-180 ~ 180
是
是
是
color
描邊的顏色
string
否
浮點數，範圍-180 ~ 180
是
是
是
fillColor
填充顏色
string
否
十六進位
是
是
是
radius
半徑
number
否
-
是
是
是
strokeWidth
描邊的寬度
number
否
-
是
是
否
level
壓蓋關係
string
是
默認為abovelabels
否
穀歌地圖：否
華為地圖：否
騰訊地圖：是
百度地圖：否
高德地圖：否
否
control
- 在地圖上顯示控制項，控制項不隨著地圖移動，即將廢棄，推薦使用cover-view
内容
類型
預設值
必填
備註
iOS支持度
Android支持度
IDE支持度
id
控制項id
number
否
在控制項點擊事件會回檔會返回此id
否
否
否
position
控件在地圖的位置
object
是
控件在地圖的位置
否
否
否
iconPath
顯示的圖標
string
是
項目目錄下的圖片路徑，支持本地路徑、代碼包路徑
否
否
否
clickable
是否可點擊
boolean
否
默認不可點擊
否
否
否
position
内容
類型
預設值
必填
備註
iOS支持度
Android支持度
IDE支持度
left
距離地圖的左邊界多遠
number
否
默認為0
否
否
否
top
距離地圖的上邊界多遠
number
否
默認為0
否
否
否
width
空間寬度
number
否
默認為圖片寬度
否
否
否
height
空間高度
number
否
默認為圖片高度
否
否
否
bindregionchange返回值
内容
說明
類型
備註
type
視野變化開始、結束時觸發
string
視野變化開始為begin，結束為end
causedBy
導致視野變化的原因
string
拖動地圖導致（drag）、縮放導致（scale）、調用接口導致（update）
比例尺
scale
3
4
5
6
7
8
9
10
11
比例
1000km
500km
200km
100km
50km
25km
20km
10km
5km
scale
12
13
14
15
16
17
18
19
20
比例
2km
1km
500m
200m
100m
50m
20m
10m
5m