快應(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)系，如不為空，組件將自動做坐標(biāo)轉(zhuǎn)換。可選值可通過 getSupportedCoordTypes 獲取
scale<number>11否縮放級別,4-20
rotate<number>0否逆時針旋轉(zhuǎn)角度
markers<array>-否用來標(biāo)記地圖上的點
showmylocation<boolean>false否顯示帶有方向的當(dāng)前定位點
polylines<array>-否折線
polygons 1050+<array>-否多邊形
circles<array>-否地圖上顯示圓
controls<array>-否控件
groundoverlays<array>-否貼圖
heatmaplayer 1070+<object>-否顯示熱力圖
includepoints<array>-否縮放視野以包含所有給定的坐標(biāo)點
showcompass 1040+<boolean>true否是否顯示指南針控件，設(shè)置為true時，旋轉(zhuǎn)地圖后指南針出現(xiàn)
showscale 1070+<boolean>false否是否顯示比例尺控件
showzoom 1070+<boolean>false否是否顯示放大縮小功能控件
enableoverlooking 1040+<boolean>false否控制啟用或禁用俯視（3D）功能，默認(rèn)關(guān)閉。如果啟用，則用戶可使用雙指 向下或向上滑動到俯視圖
enablezoom 1040+<boolean>true否是否支持縮放
enablescroll 1040+<boolean>true否是否支持拖動
enablerotate 1040+<boolean>true否是否支持旋轉(zhuǎn)

注：

  1. 一級屬性都是全部小寫的格式，并不符合駝峰命名方式，這里的 coordtype 屬性與下文需加以區(qū)分；
  2. 如果地圖沒有加載完畢，includepoints 屬性不生效，建議在 loaded 監(jiān)聽事件中設(shè)置該屬性。

子屬性

markers

名稱類型默認(rèn)值必填描述
id<number>-1否每個標(biāo)記點的唯一標(biāo)識
latitude<number>-是標(biāo)記點緯度
longitude<number>-是標(biāo)記點經(jīng)度
coordType<string>-否標(biāo)記點坐標(biāo)坐標(biāo)系，如不為空，組件將自動做坐標(biāo)轉(zhuǎn)換?？蛇x值可通過 getSupportedCoordTypes 獲取
offsetX 1030+<number>-否標(biāo)記點固定位置距離原點的 X 坐標(biāo)，map 組件的左上角為原點(0,0)。設(shè)置了 offsetX,offsetY 后，marker 的坐標(biāo)位置將不再生效。
offsetY 1030+<number>-否標(biāo)記點固定位置距離原點的 Y 坐標(biāo)，map 組件的左上角為原點(0,0)。設(shè)置了 offsetX,offsetY 后，marker 的坐標(biāo)位置將不再生效。
title<string>-否標(biāo)記點名稱
iconPath<uri>-是標(biāo)記圖標(biāo)資源的 uri。支持本地絕對路徑；1030+版本支持網(wǎng)絡(luò)路徑
opacity<number>1否標(biāo)記透明度，0-1
rotate<number>0否逆時針旋轉(zhuǎn)角度
width<length>標(biāo)記圖實際寬度否標(biāo)記圖寬度
height<length>標(biāo)記圖實際高度否標(biāo)記圖高度
anchor<object>{x:0.5,y:1}否標(biāo)記點在標(biāo)記圖標(biāo)的位置，x 表示橫向坐標(biāo)，取值范圍 0-1，y 表示縱向坐標(biāo)，取值范圍 0-1
callout<object>-否標(biāo)記點上方的文本彈窗
label 1040+<object>-否標(biāo)記點周邊展示文本
zIndex<number>-否z 軸坐標(biāo)，用來描述重疊時的展示順序

markers-callout

名稱類型默認(rèn)值必填描述
convertHtml 1040+<boolean>false否content內(nèi)容以html格式展示
content<string>-是文本內(nèi)容
color<color>#000000否字體顏色
fontSize<number>30px否文本字號
borderRadius<length>0px否邊框圓角
padding<length>0px否文本邊緣留白，支持 1-4 個參數(shù)
backgroundColor<color>#ffffff否背景色
displaybyclick | alwaysbyclick否點擊觸發(fā)顯示還是常顯
textAlignleft | right | centercenter否文本對齊方式

注：

convertHtml為true時，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否文本字號
anchorX<number>0否label的坐標(biāo)，原點是 marker 對應(yīng)的經(jīng)緯度，對應(yīng)水平偏移
anchorY<number>0否label的坐標(biāo)，原點是 marker 對應(yīng)的經(jīng)緯度，對應(yīng)垂直偏移
borderRadius<length>0px否邊框圓角
padding<length>0px否文本邊緣留白，支持 1-4 個參數(shù)
backgroundColor<color>#ffffff否背景色
textAlignleft | right | centercenter否文本對齊方式

polylines

名稱類型默認(rèn)值必填描述
points<array>-是路線上點的數(shù)組[{latitude, longitude, coordType}]
color<color>#666666否路線顏色，#666666不可簡寫為#666
width<length>10px否路線寬度
dotted<boolean>false否是否為虛線
arrowLine 1050+<boolean>false否是否展示帶箭頭紋理的線
arrowIconPath 1050+<uri>-否更換紋理圖標(biāo)，在arrowLine為true時生效，只支持本地絕對路徑圖片，圖片寬、高需設(shè)計為2的整數(shù)倍
zIndex<number>-否z 軸坐標(biāo)，用來描述重疊時的展示順序

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)，用來描述重疊時的展示順序

circles

名稱類型默認(rèn)值必填描述
latitude<number>-是圓心的緯度
longitude<number>-是圓心的經(jīng)度
coordType<string>-否圓心坐標(biāo)坐標(biāo)系，如不為空，組件將自動做坐標(biāo)轉(zhuǎn)換?？蛇x值可通過 getSupportedCoordTypes 獲取
radius<number>-是半徑（單位：米）
fillColor<color>#666666否填充顏色
borderWidth<length>0px否描邊的寬度
borderColor<color>#666666否描邊的顏色
zIndex<number>-否z 軸坐標(biāo)，用來描述重疊時的展示順序

groundoverlays

名稱類型默認(rèn)值必填描述
id<number>-1否貼圖 id
northEast<object>-是貼圖東北角坐標(biāo)
southWest<object>-是貼圖西南角坐標(biāo)
iconPath<uri>-是圖片資源的本地絕對路徑
opacity<number>1否透明度，0-1
visible<boolean>true否可見性
zIndex<number>-否z 軸坐標(biāo)，用來描述重疊時的展示順序

heatmaplayer 1070+

名稱類型默認(rèn)值必填描述
coordType<string>-否坐標(biāo)系
weightedPoints<array>-是帶權(quán)值的經(jīng)緯度位置點的數(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 ，長度不能為 0 ，兩數(shù)組長度須一致，startPoints 數(shù)據(jù)必須遞增；colors: 漸變色用到的所有顏色數(shù)組, 按聲明的順序由冷到熱；startPoints: 每一個顏色的起始點數(shù)組范圍 [0.0, 1.0]，與 colors 數(shù)組一一對應(yīng)
opacity<number>0.6否熱力圖層透明度，范圍 [0, 1]
radius<length>12px否熱力圖點半徑，范圍 [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>-否控件相對地圖組件的位置
iconPath<string>-是控件圖標(biāo)資源的本地絕對路徑
clickable<boolean>true否是否可點擊

controls-position

名稱類型默認(rèn)值必填描述
left<length>0否和地圖左邊界的距離
right<length>0否和地圖右邊界的距離，指定 left 時，該屬性無效
top<length>0否和地圖上邊界的距離
bottom<length>0否和地圖下邊界的距離，指定 top 時，該屬性無效
width<length>-否控件寬度
height<length>-否控件高度

樣式

支持 通用樣式

名稱類型默認(rèn)值必填描述
mylocation 1030+--否簡寫屬性，在一個聲明中設(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)資源的本地絕對路徑

事件

支持 通用事件

名稱參數(shù)描述
loaded-地圖渲染更新完成時觸發(fā)
regionchange{southwest, northeast}視野發(fā)生變化時觸發(fā)
tap{latitude, longitude}點擊地圖時觸發(fā)
markertap{markerId}點擊地圖標(biāo)記點時觸發(fā)
callouttap{markerId}點擊標(biāo)記點對應(yīng)彈窗觸發(fā)
controltap{controlId}點擊控件觸發(fā)
poitap 1050+{OBJECT}點擊地圖poi點時觸發(fā)

poitap 的 OBJECT 參數(shù)列表

參數(shù)類型說明
poiIdString代表poi的唯一Id
poiNameStringpoi名稱
latitudeNumber緯度
longitudeNumber經(jīng)度

方法

名稱參數(shù)描述
getCenterLocationOBJECT獲取地圖中心點坐標(biāo)
translateMarkerOBJECT在地圖上移動 marker
moveToMyLocation-將地圖中心點移動到當(dāng)前位置坐標(biāo)
includePointsOBJECT縮放地圖，展示所有給定坐標(biāo)點，如果地圖未加載完畢，該方法不生效
getRegionOBJECT獲取當(dāng)前地圖視野范圍
getScaleOBJECT獲取地圖的放大級別
getSupportedCoordTypesOBJECT獲取地圖當(dāng)前支持的坐標(biāo)系
getCoordTypeOBJECT獲取地圖當(dāng)前使用的坐標(biāo)系
convertCoordOBJECT對坐標(biāo)的坐標(biāo)系進行轉(zhuǎn)換
setCompassPosition 1070+OBJECT設(shè)置指南針控件相對地圖左上角的距離
setScalePosition 1070+OBJECT設(shè)置地圖比例尺控件相對地圖左上角的距離
setZoomPosition 1070+OBJECT設(shè)置地圖放大縮小控件相對地圖左上角的距離
setMaxAndMinScaleLevel 1070+OBJECT自定義縮放級別限制，范圍 4-20

getCenterLocation 的 OBJECT 參數(shù)列表

參數(shù)類型必填說明
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ù)類型必填說明
markerIdNumber是指定 marker
destinationObject是指定 marker 移動到的目標(biāo)點（{latitude, longitude}）
autoRotateBoolean否移動過程中是否自動旋轉(zhuǎn) marker
rotateNumber否marker 的旋轉(zhuǎn)角度，autoRotate 為 true，該值無效
durationNumber否動畫持續(xù)時長，默認(rèn)值 1000ms
animationEndFunction否動畫結(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ù)類型必填說明
pointsArray是要顯示在可視區(qū)域內(nèi)的坐標(biāo)點數(shù)組，[{latitude, longitude， coordType}]
paddingString否坐標(biāo)點形成的最小矩形區(qū)域距離邊緣的最小距離，支持 1-4 個參數(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ù)類型必填說明
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ù)類型必填說明
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ù)類型必填說明
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ù)類型必填說明
latitude<number>否坐標(biāo)點的緯度
longitude<number>否坐標(biāo)點的經(jīng)度
coordType<string>否坐標(biāo)點的坐標(biāo)系
successFunction否接口調(diào)用成功的回調(diào)函數(shù)，res = {coordType}，coordType 可選值可通過 getSupportedCoordTypes 獲取，如果坐標(biāo)點缺省，則默認(rèn)屏幕中心點為坐標(biāo)點
failFunction否接口調(diào)用失敗的回調(diào)函數(shù)
completeFunction否接口調(diào)用結(jié)束的回調(diào)函數(shù)

convertCoord 的 OBJECT 參數(shù)列表

參數(shù)類型必填說明
from<string>否輸入坐標(biāo)當(dāng)前的坐標(biāo)系，可選值可通過 getSupportedCoordTypes 獲取，當(dāng)前只支持 wgs84
to<string>否輸入坐標(biāo)需要轉(zhuǎn)換輸出的坐標(biāo)系，可選值可通過 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ù)類型必填說明
x<length>是指南針控件相對于地圖左側(cè)的橫向距離，例如：50px
y<length>是指南針控件相對于地圖上側(cè)的縱向距離，例如：50px

setScalePosition 的 OBJECT 參數(shù)列表

參數(shù)類型必填說明
x<length>是比例尺控件相對于地圖左側(cè)的橫向距離，例如：50px
y<length>是比例尺控件相對于地圖上側(cè)的縱向距離，例如：50px

setZoomPosition 的 OBJECT 參數(shù)列表

參數(shù)類型必填說明
x<length>是放大縮小控件相對于地圖左側(cè)的橫向距離，例如：50px
y<length>是放大縮小控件相對于地圖上側(cè)的縱向距離，例如：50px

setMaxAndMinScaleLevel 的 OBJECT 參數(shù)列表

參數(shù)類型必填說明
maxLevel<number>是最大倍數(shù)
minLevel<number>是最小倍數(shù)

map   示例代碼

查看示例代碼

支持明細(xì)

廠商支持備注
小米1020+-
中興1020+-
華為1030+-
金立1020+-
聯(lián)想1020+-
魅族1020+-
努比亞1020+-
OPPO1020+-
vivo1020+-
一加--
預(yù)覽版1020+-


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

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號