概述
地圖
子組件
支持且只支持 ?<custommarker>
? 作為其子組件 ?1060+
?
屬性
支持 通用屬性
名稱 | 類型 | 默認(rèn)值 | 必填 | 描述 |
---|
latitude | <number> | 默認(rèn)為當(dāng)前位置,否則為北京 | 否 | 中心緯度 |
longitude | <number> | 默認(rèn)為當(dāng)前位置,否則為北京 | 否 | 中心經(jīng)度 |
coordtype | <string> | - | 否 | 中心坐標(biāo)坐標(biāo)系,如不為空,組件將自動(dòng)做坐標(biāo)轉(zhuǎn)換??蛇x值可通過(guò) getSupportedCoordTypes 獲取 |
scale | <number> | 11 | 否 | 縮放級(jí)別,4-20 |
rotate | <number> | 0 | 否 | 逆時(shí)針旋轉(zhuǎn)角度 |
markers | <array> | - | 否 | 用來(lái)標(biāo)記地圖上的點(diǎn) |
showmylocation | <boolean> | false | 否 | 顯示帶有方向的當(dāng)前定位點(diǎn) |
polylines | <array> | - | 否 | 折線 |
polygons 1050+ | <array> | - | 否 | 多邊形 |
circles | <array> | - | 否 | 地圖上顯示圓 |
controls | <array> | - | 否 | 控件 |
groundoverlays | <array> | - | 否 | 貼圖 |
heatmaplayer 1070+ | <object> | - | 否 | 顯示熱力圖 |
includepoints | <array> | - | 否 | 縮放視野以包含所有給定的坐標(biāo)點(diǎn) |
showcompass 1040+ | <boolean> | true | 否 | 是否顯示指南針控件,設(shè)置為true時(shí),旋轉(zhuǎn)地圖后指南針出現(xiàn) |
showscale 1070+ | <boolean> | false | 否 | 是否顯示比例尺控件 |
showzoom 1070+ | <boolean> | false | 否 | 是否顯示放大縮小功能控件 |
enableoverlooking 1040+ | <boolean> | false | 否 | 控制啟用或禁用俯視(3D)功能,默認(rèn)關(guān)閉。如果啟用,則用戶可使用雙指 向下或向上滑動(dòng)到俯視圖 |
enablezoom 1040+ | <boolean> | true | 否 | 是否支持縮放 |
enablescroll 1040+ | <boolean> | true | 否 | 是否支持拖動(dòng) |
enablerotate 1040+ | <boolean> | true | 否 | 是否支持旋轉(zhuǎn) |
注:
- 一級(jí)屬性都是全部小寫(xiě)的格式,并不符合駝峰命名方式,這里的 coordtype 屬性與下文需加以區(qū)分;
- 如果地圖沒(méi)有加載完畢,includepoints 屬性不生效,建議在 loaded 監(jiān)聽(tīng)事件中設(shè)置該屬性。
子屬性
markers
名稱 | 類型 | 默認(rèn)值 | 必填 | 描述 |
---|
id | <number> | -1 | 否 | 每個(gè)標(biāo)記點(diǎn)的唯一標(biāo)識(shí) |
latitude | <number> | - | 是 | 標(biāo)記點(diǎn)緯度 |
longitude | <number> | - | 是 | 標(biāo)記點(diǎn)經(jīng)度 |
coordType | <string> | - | 否 | 標(biāo)記點(diǎn)坐標(biāo)坐標(biāo)系,如不為空,組件將自動(dòng)做坐標(biāo)轉(zhuǎn)換。可選值可通過(guò) getSupportedCoordTypes 獲取 |
offsetX 1030+ | <number> | - | 否 | 標(biāo)記點(diǎn)固定位置距離原點(diǎn)的 X 坐標(biāo),map 組件的左上角為原點(diǎn)(0,0)。設(shè)置了 offsetX,offsetY 后,marker 的坐標(biāo)位置將不再生效。 |
offsetY 1030+ | <number> | - | 否 | 標(biāo)記點(diǎn)固定位置距離原點(diǎn)的 Y 坐標(biāo),map 組件的左上角為原點(diǎn)(0,0)。設(shè)置了 offsetX,offsetY 后,marker 的坐標(biāo)位置將不再生效。 |
title | <string> | - | 否 | 標(biāo)記點(diǎn)名稱 |
iconPath | <uri> | - | 是 | 標(biāo)記圖標(biāo)資源的 uri。支持本地絕對(duì)路徑;1030+ 版本支持網(wǎng)絡(luò)路徑 |
opacity | <number> | 1 | 否 | 標(biāo)記透明度,0-1 |
rotate | <number> | 0 | 否 | 逆時(shí)針旋轉(zhuǎn)角度 |
width | <length> | 標(biāo)記圖實(shí)際寬度 | 否 | 標(biāo)記圖寬度 |
height | <length> | 標(biāo)記圖實(shí)際高度 | 否 | 標(biāo)記圖高度 |
anchor | <object> | {x:0.5,y:1} | 否 | 標(biāo)記點(diǎn)在標(biāo)記圖標(biāo)的位置,x 表示橫向坐標(biāo),取值范圍 0-1,y 表示縱向坐標(biāo),取值范圍 0-1 |
callout | <object> | - | 否 | 標(biāo)記點(diǎn)上方的文本彈窗 |
label 1040+ | <object> | - | 否 | 標(biāo)記點(diǎn)周邊展示文本 |
zIndex | <number> | - | 否 | z 軸坐標(biāo),用來(lái)描述重疊時(shí)的展示順序 |
markers-callout
名稱 | 類型 | 默認(rèn)值 | 必填 | 描述 |
---|
convertHtml 1040+ | <boolean> | false | 否 | content內(nèi)容以html格式展示 |
content | <string> | - | 是 | 文本內(nèi)容 |
color | <color> | #000000 | 否 | 字體顏色 |
fontSize | <number> | 30px | 否 | 文本字號(hào) |
borderRadius | <length> | 0px | 否 | 邊框圓角 |
padding | <length> | 0px | 否 | 文本邊緣留白,支持 1-4 個(gè)參數(shù) |
backgroundColor | <color> | #ffffff | 否 | 背景色 |
display | byclick | always | byclick | 否 | 點(diǎn)擊觸發(fā)顯示還是常顯 |
textAlign | left | right | center | center | 否 | 文本對(duì)齊方式 |
注:
convertHtml為true時(shí),content支持展示的tag有:br、p、strong、b、font、sup、sub、u及h1到h6 。
markers-label 1040+
名稱 | 類型 | 默認(rèn)值 | 必填 | 描述 |
---|
content | <string> | - | 是 | 文本內(nèi)容 |
color | <color> | #000000 | 否 | 字體顏色 |
fontSize | <number> | 30px | 否 | 文本字號(hào) |
anchorX | <number> | 0 | 否 | label的坐標(biāo),原點(diǎn)是 marker 對(duì)應(yīng)的經(jīng)緯度,對(duì)應(yīng)水平偏移 |
anchorY | <number> | 0 | 否 | label的坐標(biāo),原點(diǎn)是 marker 對(duì)應(yīng)的經(jīng)緯度,對(duì)應(yīng)垂直偏移 |
borderRadius | <length> | 0px | 否 | 邊框圓角 |
padding | <length> | 0px | 否 | 文本邊緣留白,支持 1-4 個(gè)參數(shù) |
backgroundColor | <color> | #ffffff | 否 | 背景色 |
textAlign | left | right | center | center | 否 | 文本對(duì)齊方式 |
polylines
名稱 | 類型 | 默認(rèn)值 | 必填 | 描述 |
---|
points | <array> | - | 是 | 路線上點(diǎn)的數(shù)組[{latitude, longitude, coordType}] |
color | <color> | #666666 | 否 | 路線顏色,#666666 不可簡(jiǎn)寫(xiě)為#666 |
width | <length> | 10px | 否 | 路線寬度 |
dotted | <boolean> | false | 否 | 是否為虛線 |
arrowLine 1050+ | <boolean> | false | 否 | 是否展示帶箭頭紋理的線 |
arrowIconPath 1050+ | <uri> | - | 否 | 更換紋理圖標(biāo),在arrowLine為true時(shí)生效,只支持本地絕對(duì)路徑圖片,圖片寬、高需設(shè)計(jì)為2的整數(shù)倍 |
zIndex | <number> | - | 否 | z 軸坐標(biāo),用來(lái)描述重疊時(shí)的展示順序 |
polygons 1050+
名稱 | 類型 | 默認(rèn)值 | 必填 | 描述 |
---|
points | <array> | - | 是 | 經(jīng)緯度數(shù)組[{latitude, longitude, coordType}] |
strokeColor | <color> | #666666 | 否 | 描邊的顏色 |
strokeWidth | <length> | 5px | 否 | 描邊的寬度 |
fillColor | <color> | #666666 | 否 | 填充顏色 |
zIndex | <number> | - | 否 | z 軸坐標(biāo),用來(lái)描述重疊時(shí)的展示順序 |
circles
名稱 | 類型 | 默認(rèn)值 | 必填 | 描述 |
---|
latitude | <number> | - | 是 | 圓心的緯度 |
longitude | <number> | - | 是 | 圓心的經(jīng)度 |
coordType | <string> | - | 否 | 圓心坐標(biāo)坐標(biāo)系,如不為空,組件將自動(dòng)做坐標(biāo)轉(zhuǎn)換。可選值可通過(guò) getSupportedCoordTypes 獲取 |
radius | <number> | - | 是 | 半徑(單位:米) |
fillColor | <color> | #666666 | 否 | 填充顏色 |
borderWidth | <length> | 0px | 否 | 描邊的寬度 |
borderColor | <color> | #666666 | 否 | 描邊的顏色 |
zIndex | <number> | - | 否 | z 軸坐標(biāo),用來(lái)描述重疊時(shí)的展示順序 |
groundoverlays
名稱 | 類型 | 默認(rèn)值 | 必填 | 描述 |
---|
id | <number> | -1 | 否 | 貼圖 id |
northEast | <object> | - | 是 | 貼圖東北角坐標(biāo) |
southWest | <object> | - | 是 | 貼圖西南角坐標(biāo) |
iconPath | <uri> | - | 是 | 圖片資源的本地絕對(duì)路徑 |
opacity | <number> | 1 | 否 | 透明度,0-1 |
visible | <boolean> | true | 否 | 可見(jiàn)性 |
zIndex | <number> | - | 否 | z 軸坐標(biāo),用來(lái)描述重疊時(shí)的展示順序 |
heatmaplayer 1070+
名稱 | 類型 | 默認(rèn)值 | 必填 | 描述 |
---|
coordType | <string> | - | 否 | 坐標(biāo)系 |
weightedPoints | <array> | - | 是 | 帶權(quán)值的經(jīng)緯度位置點(diǎn)的數(shù)組 {latitude, longitude,intensity: number},大小不能為 0,latitude 和 longitude 必填,intensity 默認(rèn)為 1 |
gradient | <object> | {colors: [rgb(0, 0, 200) , rgb(0, 225, 0) , rgb(255, 0, 0) ], startPoints: [0.08, 0.4, 1.0]} | 否 | 熱力圖漸變 {colors: [], startPoints: []},colors 和 statPoints 不能為 null ,長(zhǎng)度不能為 0 ,兩數(shù)組長(zhǎng)度須一致,startPoints 數(shù)據(jù)必須遞增;colors: 漸變色用到的所有顏色數(shù)組, 按聲明的順序由冷到熱;startPoints: 每一個(gè)顏色的起始點(diǎn)數(shù)組范圍 [0.0, 1.0],與 colors 數(shù)組一一對(duì)應(yīng) |
opacity | <number> | 0.6 | 否 | 熱力圖層透明度,范圍 [0, 1] |
radius | <length> | 12px | 否 | 熱力圖點(diǎn)半徑,范圍 [10,50] |
northEast/southWest
名稱 | 類型 | 默認(rèn)值 | 必填 | 描述 |
---|
latitude | <number> | - | 是 | 緯度 |
longitude | <number> | - | 是 | 經(jīng)度 |
coordType | <string> | - | 否 | 坐標(biāo)系 |
controls
名稱 | 類型 | 默認(rèn)值 | 必填 | 描述 |
---|
id | <number> | -1 | 否 | 控件的 id |
position | <object> | - | 否 | 控件相對(duì)地圖組件的位置 |
iconPath | <string> | - | 是 | 控件圖標(biāo)資源的本地絕對(duì)路徑 |
clickable | <boolean> | true | 否 | 是否可點(diǎn)擊 |
controls-position
名稱 | 類型 | 默認(rèn)值 | 必填 | 描述 |
---|
left | <length> | 0 | 否 | 和地圖左邊界的距離 |
right | <length> | 0 | 否 | 和地圖右邊界的距離,指定 left 時(shí),該屬性無(wú)效 |
top | <length> | 0 | 否 | 和地圖上邊界的距離 |
bottom | <length> | 0 | 否 | 和地圖下邊界的距離,指定 top 時(shí),該屬性無(wú)效 |
width | <length> | - | 否 | 控件寬度 |
height | <length> | - | 否 | 控件高度 |
樣式
支持 通用樣式
名稱 | 類型 | 默認(rèn)值 | 必填 | 描述 |
---|
mylocation 1030+ | - | - | 否 | 簡(jiǎn)寫(xiě)屬性,在一個(gè)聲明中設(shè)置所有的 mylocation 屬性,可以按順序設(shè)置屬性 mylocation-fill-color mylocation-stroke-color mylocation-icon-path,不設(shè)置的值為默認(rèn)值 |
mylocation-fill-color 1030+ | <color> | rgba(135, 206, 235, 0.15) | 否 | 定位精度圈填充顏色。支持透明(rgba(0,0,0,0)) |
mylocation-stroke-color 1030+ | <color> | rgba(135, 206, 235, 0.15) | 否 | 定位精度圈描邊顏色。支持透明(rgba(0,0,0,0)) |
mylocation-icon-path 1030+ | <uri> | - | 否 | 標(biāo)記圖標(biāo)資源的本地絕對(duì)路徑 |
事件
支持 通用事件
名稱 | 參數(shù) | 描述 |
---|
loaded | - | 地圖渲染更新完成時(shí)觸發(fā) |
regionchange | {southwest, northeast} | 視野發(fā)生變化時(shí)觸發(fā) |
tap | {latitude, longitude} | 點(diǎn)擊地圖時(shí)觸發(fā) |
markertap | {markerId} | 點(diǎn)擊地圖標(biāo)記點(diǎn)時(shí)觸發(fā) |
callouttap | {markerId} | 點(diǎn)擊標(biāo)記點(diǎn)對(duì)應(yīng)彈窗觸發(fā) |
controltap | {controlId} | 點(diǎn)擊控件觸發(fā) |
poitap 1050+ | {OBJECT} | 點(diǎn)擊地圖poi點(diǎn)時(shí)觸發(fā) |
poitap 的 OBJECT 參數(shù)列表
參數(shù) | 類型 | 說(shuō)明 |
---|
poiId | String | 代表poi的唯一Id |
poiName | String | poi名稱 |
latitude | Number | 緯度 |
longitude | Number | 經(jīng)度 |
方法
名稱 | 參數(shù) | 描述 |
---|
getCenterLocation | OBJECT | 獲取地圖中心點(diǎn)坐標(biāo) |
translateMarker | OBJECT | 在地圖上移動(dòng) marker |
moveToMyLocation | - | 將地圖中心點(diǎn)移動(dòng)到當(dāng)前位置坐標(biāo) |
includePoints | OBJECT | 縮放地圖,展示所有給定坐標(biāo)點(diǎn),如果地圖未加載完畢,該方法不生效 |
getRegion | OBJECT | 獲取當(dāng)前地圖視野范圍 |
getScale | OBJECT | 獲取地圖的放大級(jí)別 |
getSupportedCoordTypes | OBJECT | 獲取地圖當(dāng)前支持的坐標(biāo)系 |
getCoordType | OBJECT | 獲取地圖當(dāng)前使用的坐標(biāo)系 |
convertCoord | OBJECT | 對(duì)坐標(biāo)的坐標(biāo)系進(jìn)行轉(zhuǎn)換 |
setCompassPosition 1070+ | OBJECT | 設(shè)置指南針控件相對(duì)地圖左上角的距離 |
setScalePosition 1070+ | OBJECT | 設(shè)置地圖比例尺控件相對(duì)地圖左上角的距離 |
setZoomPosition 1070+ | OBJECT | 設(shè)置地圖放大縮小控件相對(duì)地圖左上角的距離 |
setMaxAndMinScaleLevel 1070+ | OBJECT | 自定義縮放級(jí)別限制,范圍 4-20 |
getCenterLocation 的 OBJECT 參數(shù)列表
參數(shù) | 類型 | 必填 | 說(shuō)明 |
---|
success | Function | 否 | 接口調(diào)用成功的回調(diào)函數(shù), res = {latitude, longitude} |
fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) |
complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù) |
translateMarker 的 OBJECT 參數(shù)列表
參數(shù) | 類型 | 必填 | 說(shuō)明 |
---|
markerId | Number | 是 | 指定 marker |
destination | Object | 是 | 指定 marker 移動(dòng)到的目標(biāo)點(diǎn)({latitude, longitude} ) |
autoRotate | Boolean | 否 | 移動(dòng)過(guò)程中是否自動(dòng)旋轉(zhuǎn) marker |
rotate | Number | 否 | marker 的旋轉(zhuǎn)角度,autoRotate 為 true,該值無(wú)效 |
duration | Number | 否 | 動(dòng)畫(huà)持續(xù)時(shí)長(zhǎng),默認(rèn)值 1000ms |
animationEnd | Function | 否 | 動(dòng)畫(huà)結(jié)束回調(diào)函數(shù) |
success | Function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) |
fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) |
complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù) |
includePoints 的 OBJECT 參數(shù)列表
參數(shù) | 類型 | 必填 | 說(shuō)明 |
---|
points | Array | 是 | 要顯示在可視區(qū)域內(nèi)的坐標(biāo)點(diǎn)數(shù)組,[{latitude, longitude, coordType}] |
padding | String | 否 | 坐標(biāo)點(diǎn)形成的最小矩形區(qū)域距離邊緣的最小距離,支持 1-4 個(gè)參數(shù),單位:px |
success | Function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) |
fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) |
complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù) |
getRegion 的 OBJECT 參數(shù)列表
參數(shù) | 類型 | 必填 | 說(shuō)明 |
---|
success | Function | 否 | 接口調(diào)用成功的回調(diào)函數(shù), res = {southwest, northeast} ,西南角與東北角的經(jīng)緯度 |
fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) |
complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù) |
getScale 的 OBJECT 參數(shù)列表
參數(shù) | 類型 | 必填 | 說(shuō)明 |
---|
success | Function | 否 | 接口調(diào)用成功的回調(diào)函數(shù),res = {scale} |
fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) |
complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù) |
getSupportedCoordTypes 的 OBJECT 參數(shù)列表
參數(shù) | 類型 | 必填 | 說(shuō)明 |
---|
success | Function | 否 | 接口調(diào)用成功的回調(diào)函數(shù),res = coordTypes:[coordType1, coordType2, ...] |
fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) |
complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù) |
getCoordType 的 OBJECT 參數(shù)列表
參數(shù) | 類型 | 必填 | 說(shuō)明 |
---|
latitude | <number> | 否 | 坐標(biāo)點(diǎn)的緯度 |
longitude | <number> | 否 | 坐標(biāo)點(diǎn)的經(jīng)度 |
coordType | <string> | 否 | 坐標(biāo)點(diǎn)的坐標(biāo)系 |
success | Function | 否 | 接口調(diào)用成功的回調(diào)函數(shù),res = {coordType} ,coordType 可選值可通過(guò) getSupportedCoordTypes 獲取,如果坐標(biāo)點(diǎn)缺省,則默認(rèn)屏幕中心點(diǎn)為坐標(biāo)點(diǎn) |
fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) |
complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù) |
convertCoord 的 OBJECT 參數(shù)列表
參數(shù) | 類型 | 必填 | 說(shuō)明 |
---|
from | <string> | 否 | 輸入坐標(biāo)當(dāng)前的坐標(biāo)系,可選值可通過(guò) getSupportedCoordTypes 獲取,當(dāng)前只支持 wgs84 |
to | <string> | 否 | 輸入坐標(biāo)需要轉(zhuǎn)換輸出的坐標(biāo)系,可選值可通過(guò) getSupportedCoordTypes 獲取,默認(rèn)為當(dāng)前地圖坐標(biāo)系 |
latitude | <number> | 是 | 需要轉(zhuǎn)換的坐標(biāo)緯度 |
longitude | <number> | 是 | 需要轉(zhuǎn)換的坐標(biāo)經(jīng)度 |
success | Function | 否 | 接口調(diào)用成功的回調(diào)函數(shù),res = {latitude, longitude} |
fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) |
complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù) |
setCompassPosition 的 OBJECT 參數(shù)列表
參數(shù) | 類型 | 必填 | 說(shuō)明 |
---|
x | <length> | 是 | 指南針控件相對(duì)于地圖左側(cè)的橫向距離,例如:50px |
y | <length> | 是 | 指南針控件相對(duì)于地圖上側(cè)的縱向距離,例如:50px |
setScalePosition 的 OBJECT 參數(shù)列表
參數(shù) | 類型 | 必填 | 說(shuō)明 |
---|
x | <length> | 是 | 比例尺控件相對(duì)于地圖左側(cè)的橫向距離,例如:50px |
y | <length> | 是 | 比例尺控件相對(duì)于地圖上側(cè)的縱向距離,例如:50px |
setZoomPosition 的 OBJECT 參數(shù)列表
參數(shù) | 類型 | 必填 | 說(shuō)明 |
---|
x | <length> | 是 | 放大縮小控件相對(duì)于地圖左側(cè)的橫向距離,例如:50px |
y | <length> | 是 | 放大縮小控件相對(duì)于地圖上側(cè)的縱向距離,例如:50px |
setMaxAndMinScaleLevel 的 OBJECT 參數(shù)列表
參數(shù) | 類型 | 必填 | 說(shuō)明 |
---|
maxLevel | <number> | 是 | 最大倍數(shù) |
minLevel | <number> | 是 | 最小倍數(shù) |
map 示例代碼
查看示例代碼
支持明細(xì)
廠商 | 支持 | 備注 |
---|
小米 | 1020+ | - |
中興 | 1020+ | - |
華為 | 1030+ | - |
金立 | 1020+ | - |
聯(lián)想 | 1020+ | - |
魅族 | 1020+ | - |
努比亞 | 1020+ | - |
OPPO | 1020+ | - |
vivo | 1020+ | - |
一加 | - | - |
預(yù)覽版 | 1020+ | - |
更多建議: