快應(yīng)用 map

2020-08-06 14:58 更新

概述

地圖

子組件

支持且只支持 ?<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)

注:

  1. 一級(jí)屬性都是全部小寫(xiě)的格式,并不符合駝峰命名方式,這里的 coordtype 屬性與下文需加以區(qū)分;
  2. 如果地圖沒(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>falsecontent內(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背景色
displaybyclick | alwaysbyclick點(diǎn)擊觸發(fā)顯示還是常顯
textAlignleft | right | centercenter文本對(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>0label的坐標(biāo),原點(diǎn)是 marker 對(duì)應(yīng)的經(jīng)緯度,對(duì)應(yīng)水平偏移
anchorY<number>0label的坐標(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背景色
textAlignleft | right | centercenter文本對(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ō)明
poiIdString代表poi的唯一Id
poiNameStringpoi名稱
latitudeNumber緯度
longitudeNumber經(jīng)度

方法

名稱參數(shù)描述
getCenterLocationOBJECT獲取地圖中心點(diǎn)坐標(biāo)
translateMarkerOBJECT在地圖上移動(dòng) marker
moveToMyLocation-將地圖中心點(diǎn)移動(dòng)到當(dāng)前位置坐標(biāo)
includePointsOBJECT縮放地圖,展示所有給定坐標(biāo)點(diǎn),如果地圖未加載完畢,該方法不生效
getRegionOBJECT獲取當(dāng)前地圖視野范圍
getScaleOBJECT獲取地圖的放大級(jí)別
getSupportedCoordTypesOBJECT獲取地圖當(dāng)前支持的坐標(biāo)系
getCoordTypeOBJECT獲取地圖當(dāng)前使用的坐標(biāo)系
convertCoordOBJECT對(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ō)明
successFunction接口調(diào)用成功的回調(diào)函數(shù), res = {latitude, longitude}
failFunction接口調(diào)用失敗的回調(diào)函數(shù)
completeFunction接口調(diào)用結(jié)束的回調(diào)函數(shù)

translateMarker 的 OBJECT 參數(shù)列表

參數(shù)類型必填說(shuō)明
markerIdNumber指定 marker
destinationObject指定 marker 移動(dòng)到的目標(biāo)點(diǎn)({latitude, longitude}
autoRotateBoolean移動(dòng)過(guò)程中是否自動(dòng)旋轉(zhuǎn) marker
rotateNumbermarker 的旋轉(zhuǎn)角度,autoRotate 為 true,該值無(wú)效
durationNumber動(dòng)畫(huà)持續(xù)時(shí)長(zhǎng),默認(rèn)值 1000ms
animationEndFunction動(dòng)畫(huà)結(jié)束回調(diào)函數(shù)
successFunction接口調(diào)用成功的回調(diào)函數(shù)
failFunction接口調(diào)用失敗的回調(diào)函數(shù)
completeFunction接口調(diào)用結(jié)束的回調(diào)函數(shù)

includePoints 的 OBJECT 參數(shù)列表

參數(shù)類型必填說(shuō)明
pointsArray要顯示在可視區(qū)域內(nèi)的坐標(biāo)點(diǎn)數(shù)組,[{latitude, longitude, coordType}]
paddingString坐標(biāo)點(diǎn)形成的最小矩形區(qū)域距離邊緣的最小距離,支持 1-4 個(gè)參數(shù),單位:px
successFunction接口調(diào)用成功的回調(diào)函數(shù)
failFunction接口調(diào)用失敗的回調(diào)函數(shù)
completeFunction接口調(diào)用結(jié)束的回調(diào)函數(shù)

getRegion 的 OBJECT 參數(shù)列表

參數(shù)類型必填說(shuō)明
successFunction接口調(diào)用成功的回調(diào)函數(shù), res = {southwest, northeast},西南角與東北角的經(jīng)緯度
failFunction接口調(diào)用失敗的回調(diào)函數(shù)
completeFunction接口調(diào)用結(jié)束的回調(diào)函數(shù)

getScale 的 OBJECT 參數(shù)列表

參數(shù)類型必填說(shuō)明
successFunction接口調(diào)用成功的回調(diào)函數(shù),res = {scale}
failFunction接口調(diào)用失敗的回調(diào)函數(shù)
completeFunction接口調(diào)用結(jié)束的回調(diào)函數(shù)

getSupportedCoordTypes 的 OBJECT 參數(shù)列表

參數(shù)類型必填說(shuō)明
successFunction接口調(diào)用成功的回調(diào)函數(shù),res = coordTypes:[coordType1, coordType2, ...]
failFunction接口調(diào)用失敗的回調(diào)函數(shù)
completeFunction接口調(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)系
successFunction接口調(diào)用成功的回調(diào)函數(shù),res = {coordType},coordType 可選值可通過(guò) getSupportedCoordTypes 獲取,如果坐標(biāo)點(diǎn)缺省,則默認(rèn)屏幕中心點(diǎn)為坐標(biāo)點(diǎn)
failFunction接口調(diào)用失敗的回調(diào)函數(shù)
completeFunction接口調(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)度
successFunction接口調(diào)用成功的回調(diào)函數(shù),res = {latitude, longitude}
failFunction接口調(diào)用失敗的回調(diào)函數(shù)
completeFunction接口調(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+-
OPPO1020+-
vivo1020+-
一加--
預(yù)覽版1020+-


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)