Map組件設(shè)計(jì)文檔

組件設(shè)計(jì)目的

分析當(dāng)前各業(yè)務(wù)方向(銷售端、商城、數(shù)據(jù)可視化、TMS)內(nèi)地圖相關(guān)應(yīng)用的地圖功能使用情況，封裝Map組件供給各業(yè)務(wù)向進(jìn)行使用。

將高德地圖API進(jìn)行二次封裝，降低地圖相關(guān)功能學(xué)習(xí)代價(jià)，方便地圖相關(guān)應(yīng)用開發(fā)。

適用場(chǎng)景

用戶定位

銷售端 商城 中進(jìn)行的用戶位置確定，坐標(biāo)上傳等

地物的地理位置展示(點(diǎn) 路徑折線 多邊形)

MIS中 銷售校準(zhǔn)點(diǎn) 銷售坐標(biāo)點(diǎn) 超市注冊(cè)點(diǎn)等點(diǎn)位置展示

TMS中 訂單(超市)位置展示 排線線路展示

手動(dòng)進(jìn)行覆蓋物繪制與編輯(點(diǎn) 線 面)

MIS中 客服校準(zhǔn)點(diǎn)標(biāo)注；區(qū)域限制售賣 區(qū)域繪制與編輯

行政區(qū)域范圍查詢

TMS中 配送方案中區(qū)域選擇

組件特性

組件化的使用方式，按需加載相關(guān)功能并返回實(shí)例

組件使用方法

組件依賴jQuery或zepto，需要在組件頭部引入(或像數(shù)據(jù)平臺(tái)一樣在jquery之后引入亦可)

組件暴露一個(gè)$.Deferred對(duì)象，即module.exports = MapTool;，使得用戶的使用方式更簡(jiǎn)單，具體使用方式如下：

// 先引入組件

var MapTool = require("common:widget/map/mapTool.js");

// 在頂部先定義相應(yīng)功能變量

var map,drawTool,infoWindow;

// 需要傳入用到的地圖功能，會(huì)按需加載

new MapTool(["Map","DrawTool","InfoWindow"],

// 傳入用戶配置參數(shù)，非必填(組件內(nèi)預(yù)設(shè)默認(rèn)參數(shù))；

{

Map:{

center:[116.397428, 39.90923],

zoom:12

}

}

).then(function(toolList){

// 加載成功后會(huì)按順序返回相應(yīng)的功能實(shí)例

map = toolList[0];

drawTool = toolList[1];

infoWindow = toolList[2];

// 此時(shí)可以開始執(zhí)行與地圖加載有關(guān)的操作，回調(diào)函數(shù)無需傳入

action();

}).fail(function(){

// 失敗處理的內(nèi)容

var error = arguments[0][0];

console.log(error.msg);

})

API

功能列表

功能名稱

說明

Map

提供地圖顯示功能，返回一個(gè)AMap.Map的實(shí)例對(duì)象

DrawTool

提供覆蓋物的繪制功能，包括點(diǎn) 圓 折線 多邊形 麻點(diǎn) 右鍵菜單的繪制，調(diào)用相關(guān)方法進(jìn)行繪制后會(huì)返回相應(yīng)的繪制對(duì)象 依賴Map功能

InfoWindow

提供信息窗體展示功能，返回一個(gè) AMap.InfoWindow的實(shí)例對(duì)象，提供常用的打開窗體、設(shè)置窗體內(nèi)容等功能 依賴Map功能

District

提供行政區(qū)查詢服務(wù)，提供全國(guó)各省、市、縣、區(qū)的中心點(diǎn)經(jīng)緯度、行政區(qū)邊界坐標(biāo)組、下級(jí)行政區(qū)等信息

MouseTool

提供地圖上的手動(dòng)繪制功能，可包括點(diǎn) 折線 面等覆蓋物 依賴Map功能

PolyEditor

提供多邊形、折線編輯功能 依賴Map功能

Locate

提供定位功能

Events

提供事件綁定功能

MapTool

構(gòu)造函數(shù)

返回值

說明

MapTool(pluginList:Array,options:Object)

$.Deferred

構(gòu)造一個(gè)Map組件實(shí)例對(duì)象，第一個(gè)參數(shù)是需要使用的功能名稱數(shù)組，第二個(gè)參數(shù)是使用功能的預(yù)設(shè)參數(shù)(具體參數(shù)見各功能)；此時(shí)會(huì)返回一個(gè)$.Deferred對(duì)象，加載完成后按傳入順序返回功能實(shí)例

例：

// 需要傳入用到的地圖功能，會(huì)按需加載

new MapTool(["Map","DrawTool","InfoWindow"],

// 傳入用戶配置參數(shù)，非必填(組件內(nèi)預(yù)設(shè)默認(rèn)參數(shù))；

{

Map:{

center:[116.397428, 39.90923],

zoom:12

}

}

).then(function(toolList){

// 加載成功后會(huì)按順序返回相應(yīng)的功能實(shí)例

map = toolList[0];

drawTool = toolList[1];

infoWindow = toolList[2];

// 此時(shí)可以開始執(zhí)行與地圖加載有關(guān)的操作，回調(diào)函數(shù)無需傳入

action();

}).fail(function(){

// 失敗處理的內(nèi)容

var error = arguments[0][0];

console.log(error.msg);

});

Map

預(yù)設(shè)參數(shù)

名稱

參數(shù)類型

說明

container

String

地圖容器id 必填

zoom

Number

地圖顯示的縮放級(jí)別默認(rèn)4

zooms

Array

地圖顯示的縮放級(jí)別范圍，PC默認(rèn)[3-18],移動(dòng)端默認(rèn)[3-19]

center

Array

地圖中心點(diǎn)坐標(biāo)值[lng:經(jīng)度,lat:緯度]，默認(rèn)顯示用戶所在城市范圍

resizeEnable

Boolean

是否監(jiān)控地圖容器尺寸變化，默認(rèn)值為false

dragEnable

Boolean

地圖是否可通過鼠標(biāo)拖拽平移，默認(rèn)為true

zoomEnable

Boolean

地圖是否可縮放，默認(rèn)值為true

實(shí)例方法

方法名稱

返回值

說明

setZoom(level:Number)

設(shè)置地圖顯示的縮放級(jí)別

setCenter(position:Array)

設(shè)置地圖顯示的中心點(diǎn)

setZoomAndCenter(zoomLevel:Number,center:Array)

無

地圖縮放至指定級(jí)別并以指定點(diǎn)為地圖顯示中心點(diǎn)

setCity(city:String，callback:Functon)

按照行政區(qū)名稱設(shè)置地圖顯示的中心點(diǎn)，行政區(qū)名稱支持中國(guó)、省、市、區(qū)/縣

setDefaultCursor(cursor:String)

設(shè)置鼠標(biāo)指針默認(rèn)樣式，參數(shù)cursor應(yīng)符合CSS的cursor屬性規(guī)范。可為CSS標(biāo)注中的光標(biāo)樣式，如：setCursor(“pointer”)等；或者自定義的光標(biāo)樣式，如： setCursor("url('url地址'),pointer")

panTo(positon:Array)

地圖中心點(diǎn)平移至指定點(diǎn)位置

setFitView(overlayList:Array)

根據(jù)地圖上添加的覆蓋物分布情況，自動(dòng)縮放地圖到合適的視野級(jí)別，參數(shù)overlayList默認(rèn)為當(dāng)前地圖上添加的所有覆蓋物圖層

clearMap( )

刪除地圖上所有的覆蓋物

destroy( )

注銷地圖對(duì)象，并清空地圖容器

plugin(name:String/Array,callback:Function)

插件加載方法**(如果用到了組件未提供的功能插件時(shí)可以使用)**。參數(shù)name中指定需要加載的插件類型，同時(shí)加載多個(gè)插件時(shí)，以字符串?dāng)?shù)組的形式添加。在Callback回調(diào)函數(shù)中進(jìn)行地圖插件的創(chuàng)建、插件事件的綁定等操作；插件為地圖功能的擴(kuò)展，按需加載

事件

事件名稱

返回參數(shù)

說明

complete

地圖圖塊加載完成后觸發(fā)事件

click

鼠標(biāo)左鍵單擊事件

dblclick

鼠標(biāo)左鍵雙擊事件

rightclick

鼠標(biāo)右鍵單擊事件

mapmove

地圖平移時(shí)觸發(fā)

zoomchange

地圖縮放級(jí)別更改后觸發(fā)

mousemove

鼠標(biāo)在地圖上移動(dòng)時(shí)觸發(fā)

mouseover

鼠標(biāo)移入地圖容器內(nèi)時(shí)觸發(fā)

mouseout

鼠標(biāo)移出地圖容器時(shí)觸發(fā)

mouseup

鼠標(biāo)在地圖上單擊抬起時(shí)觸發(fā)

mousedown

鼠標(biāo)在地圖上單擊按下時(shí)觸發(fā)

resize

地圖容器大小改變事件

touchstart

觸摸開始時(shí)觸發(fā)事件，僅適用移動(dòng)設(shè)備

touchmove

觸摸移動(dòng)進(jìn)行中時(shí)觸發(fā)事件，僅適用移動(dòng)設(shè)備

touchend

觸摸結(jié)束時(shí)觸發(fā)事件，僅適用移動(dòng)設(shè)備

DrawTool

提供點(diǎn)標(biāo)記(marker)、圓(circle)、折線(polyline)、多邊形(polygon)、海量點(diǎn)(massmarks)與右鍵菜單(contextMenu)的繪制方法

預(yù)設(shè)參數(shù)

示例：

new Map(["map","drawTool"],

// 傳入用戶配置參數(shù)，非必填(組件內(nèi)預(yù)設(shè)默認(rèn)參數(shù))；

{

drawTool:{

marker:{

// 詳細(xì)參數(shù)

},

polyline:{

// 詳細(xì)參數(shù)

},

...

}

}

)

DrawTool.marker 預(yù)設(shè)參數(shù)

名稱

參數(shù)類型

說明

position

Array

marker繪制位置，必填

offset

Array

點(diǎn)標(biāo)記顯示位置偏移量，默認(rèn)值為[-10,-34]

icon

String

content

String

點(diǎn)標(biāo)記顯示內(nèi)容，可以是HTML要素字符串。content有效時(shí)，icon屬性將被覆蓋

topWhenClick

Boolean

鼠標(biāo)點(diǎn)擊時(shí)marker是否置頂，默認(rèn)false ，不置頂

draggable

Boolean

設(shè)置點(diǎn)標(biāo)記是否可拖拽移動(dòng)，默認(rèn)為false

raiseOnDrag

Boolean

設(shè)置拖拽點(diǎn)標(biāo)記時(shí)是否開啟點(diǎn)標(biāo)記離開地圖的效果，默認(rèn)為false

zIndex

Number

點(diǎn)標(biāo)記的疊加順序。地圖上存在多個(gè)點(diǎn)標(biāo)記疊加時(shí)，通過該屬性使級(jí)別較高的點(diǎn)標(biāo)記在上層顯示，默認(rèn)zIndex：100

title

String

鼠標(biāo)滑過點(diǎn)標(biāo)記時(shí)的文字提示，不設(shè)置則鼠標(biāo)滑過點(diǎn)標(biāo)無文字提示

clickable

Boolean

點(diǎn)標(biāo)記是否可點(diǎn)擊，默認(rèn)true

extData

任意

用戶自定義屬性，支持JavaScript API任意數(shù)據(jù)類型，如Marker的id等

marker 實(shí)例方法

方法名稱

返回值

說明

setClickable(clickable:Boolean )

設(shè)置點(diǎn)標(biāo)記是支持鼠標(biāo)單擊事件

getPosition( )

獲取點(diǎn)標(biāo)記的位置

setPosition(lnglat:Array)

設(shè)置點(diǎn)標(biāo)記位置例[116.082562,39.9329]

setzIndex(index:Number)

設(shè)置點(diǎn)標(biāo)記的疊加順序，默認(rèn)最先添加的點(diǎn)標(biāo)記在最底層

hide( )

點(diǎn)標(biāo)記隱藏

show( )

點(diǎn)標(biāo)記顯示

`setContent(html:String

htmlDOM)`

getContent( )

String

獲取點(diǎn)標(biāo)記內(nèi)容

moveAlong(path:Array, speed:Number, f:Function, circlable:Boolean)

以指定的速度，點(diǎn)標(biāo)記沿指定的路徑移動(dòng)。參數(shù)path為路徑坐標(biāo)串；speed為指定速度，單位：千米/小時(shí)；回調(diào)函數(shù)f為變化曲線函數(shù)，缺省為function(k){return k}；參數(shù)circlable表明是否循環(huán)執(zhí)行動(dòng)畫，默認(rèn)為false

moveTo(lnglat:Array,speed:Number,f:Function)

以給定速度移動(dòng)點(diǎn)標(biāo)記到指定位置。參數(shù)lnglat為指定位置，必設(shè)；speed為指定速度，單位：千米/小時(shí)；回調(diào)函數(shù)f為變化曲線函數(shù)，缺省為function(k){return k}

stopMove( )

點(diǎn)標(biāo)記停止動(dòng)畫

pauseMove()

暫停點(diǎn)標(biāo)記的動(dòng)畫效果

resumeMove()

重新開始點(diǎn)標(biāo)記的動(dòng)畫效果

setExtData(ext:Any)

設(shè)置用戶自定義屬性，支持JavaScript API任意數(shù)據(jù)類型，如Marker的id等

getExtData( )

任意

獲取用戶自定義屬性

marker 事件

事件名稱

返回參數(shù)

說明

click

鼠標(biāo)左鍵單擊事件

dblclick

鼠標(biāo)左鍵雙擊事件

rightclick

鼠標(biāo)右鍵單擊事件

mousemove

鼠標(biāo)移動(dòng)

mouseover

鼠標(biāo)移進(jìn)點(diǎn)標(biāo)記時(shí)觸發(fā)事件

mouseout

鼠標(biāo)移出點(diǎn)標(biāo)記時(shí)觸發(fā)事件

mouseup

鼠標(biāo)在點(diǎn)標(biāo)記上按下后抬起時(shí)觸發(fā)事件

mousedown

鼠標(biāo)在點(diǎn)標(biāo)記上按下時(shí)觸發(fā)事件

dragstart

開始拖拽點(diǎn)標(biāo)記時(shí)觸發(fā)事件

dragging

鼠標(biāo)拖拽移動(dòng)點(diǎn)標(biāo)記時(shí)觸發(fā)事件

dragend

點(diǎn)標(biāo)記拖拽移動(dòng)結(jié)束觸發(fā)事件

moving

Object

點(diǎn)標(biāo)記在執(zhí)行moveTo，moveAlong動(dòng)畫時(shí)觸發(fā)事件，Object對(duì)象的格式是{passedPath:Array.}。其中passedPath為Marker對(duì)象在moveAlong或者moveTo過程中已經(jīng)走過的路徑。

moveend

點(diǎn)標(biāo)記執(zhí)行moveTo動(dòng)畫結(jié)束時(shí)觸發(fā)事件，也可以由moveAlong方法觸發(fā)

movealong

點(diǎn)標(biāo)記執(zhí)行moveAlong動(dòng)畫一次后觸發(fā)事件

touchstart

觸摸開始時(shí)觸發(fā)事件，僅適用移動(dòng)設(shè)備

touchmove

觸摸移動(dòng)進(jìn)行中時(shí)觸發(fā)事件，僅適用移動(dòng)設(shè)備

touchend

觸摸結(jié)束時(shí)觸發(fā)事件，僅適用移動(dòng)設(shè)備

DrawTool.circle 預(yù)設(shè)參數(shù)

名稱

參數(shù)類型

說明

center

Array

圓心位置，必填

radius

Number

圓半徑，單位:米,默認(rèn)100

zIndex

Number

圓的疊加順序。地圖上存在多個(gè)點(diǎn)標(biāo)記疊加時(shí)，通過該屬性使級(jí)別較高的點(diǎn)標(biāo)記在上層顯示，默認(rèn)10

strokeColor

String

外邊界顏色，使用16進(jìn)制顏色代碼賦值。默認(rèn)值為#3366FF[亮藍(lán)色]

strokeOpacity

Number

外邊界透明度，取值范圍[0,1]，0表示完全透明，1表示不透明。默認(rèn)為0.9

strokeWeight

Number

外邊界寬度，單位：像素，默認(rèn)1

strokeStyle

String

外邊界樣式，實(shí)線:solid，虛線:dashed，默認(rèn)solid

fillColor

String

圓填充顏色，使用16進(jìn)制顏色代碼賦值。默認(rèn)值為#FFAA00[亮黃色]

fillOpacity

Number

圓填充透明度，取值范圍[0,1]，0表示完全透明，1表示不透明。默認(rèn)為0.9

extData

任意

用戶自定義屬性，支持JavaScript API任意數(shù)據(jù)類型，如Marker的id等

circle 實(shí)例方法

方法名稱

返回值

說明

setCenter(lnglat:Array)

設(shè)置圓的中心點(diǎn)

getCenter( )

獲取圓中心點(diǎn)

getBounds( )

獲取圓外切矩形范圍

setRadius(radius:Number)

設(shè)置圓形的半徑

getRadius( )

Number

獲取圓的半徑

setOptions(opt:circleOptions)

修改圓的屬性

getOptions( )

Object

獲取圓的屬性

hide( )

圓隱藏

show( )

圓顯示

setExtData(ext:Any)

設(shè)置用戶自定義屬性，支持JavaScript API任意數(shù)據(jù)類型，如Marker的id等

getExtData( )

任意

獲取用戶自定義屬性

contains(point:Array)

Boolean

判斷指定點(diǎn)坐標(biāo)是否在圓內(nèi)

circle 事件

事件名稱

返回參數(shù)

說明

click

鼠標(biāo)左鍵單擊事件

dblclick

鼠標(biāo)左鍵雙擊事件

rightclick

鼠標(biāo)右鍵單擊事件

mouseover

鼠標(biāo)經(jīng)過時(shí)觸發(fā)事件

mouseout

鼠標(biāo)移出時(shí)觸發(fā)事件

mouseup

鼠標(biāo)后抬起時(shí)觸發(fā)事件

mousedown

鼠標(biāo)按下時(shí)觸發(fā)事件

touchstart

觸摸開始時(shí)觸發(fā)事件，僅適用移動(dòng)設(shè)備

touchmove

觸摸移動(dòng)進(jìn)行中時(shí)觸發(fā)事件，僅適用移動(dòng)設(shè)備

touchend

觸摸結(jié)束時(shí)觸發(fā)事件，僅適用移動(dòng)設(shè)備

hide

{type, target}

隱藏事件

show

{type, target}

顯示事件

change

屬性發(fā)生變化時(shí)

DrawTool.polyline 預(yù)設(shè)參數(shù)

名稱

參數(shù)類型

說明

path

Array

折線的節(jié)點(diǎn)坐標(biāo)數(shù)組，必填

strokeColor

String

線條顏色，使用16進(jìn)制顏色代碼賦值。默認(rèn)值為#3366FF[亮藍(lán)色]

strokeOpacity

Number

線條透明度，取值范圍[0,1]，0表示完全透明，1表示不透明。默認(rèn)為0.9

strokeWeight

Number

線條寬度，單位：像素，默認(rèn)3

strokeStyle

String

線樣式，實(shí)線:solid，虛線:dashed,默認(rèn)實(shí)線

zIndex

Number

折線的疊加順序。地圖上存在多個(gè)點(diǎn)標(biāo)記疊加時(shí)，通過該屬性使級(jí)別較高的點(diǎn)標(biāo)記在上層顯示，默認(rèn)50

extData

任意

用戶自定義屬性，支持JavaScript API任意數(shù)據(jù)類型，如Marker的id等

polyline 實(shí)例方法

方法名稱

返回值

說明

setPath(path:Array)

設(shè)置組成該折線的節(jié)點(diǎn)數(shù)組

getPath( )

Array

獲取折線路徑的節(jié)點(diǎn)數(shù)組

setOptions(opt:PolylineOptions)

修改折線屬性

getOptions( )

Object

獲取折線的屬性

hide( )

折線隱藏

show( )

折線顯示

getLength( )

Number

獲取折線的總長(zhǎng)度(單位：米)

getBounds( )

獲取當(dāng)前折線的矩形范圍對(duì)象

setExtData(ext:Any)

設(shè)置用戶自定義屬性，支持JavaScript API任意數(shù)據(jù)類型，如Marker的id等

getExtData( )

任意

獲取用戶自定義屬性

polyline 事件

事件名稱

返回參數(shù)

說明

click

鼠標(biāo)左鍵單擊事件

dblclick

鼠標(biāo)左鍵雙擊事件

rightclick

鼠標(biāo)右鍵單擊事件

mouseover

鼠標(biāo)經(jīng)過時(shí)觸發(fā)事件

mouseout

鼠標(biāo)移出時(shí)觸發(fā)事件

mouseup

鼠標(biāo)后抬起時(shí)觸發(fā)事件

mousedown

鼠標(biāo)按下時(shí)觸發(fā)事件

touchstart

觸摸開始時(shí)觸發(fā)事件，僅適用移動(dòng)設(shè)備

touchmove

觸摸移動(dòng)進(jìn)行中時(shí)觸發(fā)事件，僅適用移動(dòng)設(shè)備

touchend

觸摸結(jié)束時(shí)觸發(fā)事件，僅適用移動(dòng)設(shè)備

hide

{type, target}

隱藏事件

show

{type, target}

顯示事件

change

屬性發(fā)生變化時(shí)

DrawTool.polygon 預(yù)設(shè)參數(shù)

名稱

參數(shù)類型

說明

path

Array

多邊形的節(jié)點(diǎn)坐標(biāo)數(shù)組，必填

strokeColor

String

外邊界顏色，使用16進(jìn)制顏色代碼賦值。默認(rèn)值為#3366FF[亮藍(lán)色]

strokeOpacity

Number

外邊界透明度，取值范圍[0,1]，0表示完全透明，1表示不透明。默認(rèn)為0.9

strokeWeight

Number

外邊界寬度，單位：像素，默認(rèn)3

strokeStyle

String

外邊界樣式，實(shí)線:solid，虛線:dashed，默認(rèn)solid

fillColor

String

多邊形填充顏色，使用16進(jìn)制顏色代碼賦值。默認(rèn)值為#FFAA00[亮黃色]

fillOpacity

Number

多邊形填充透明度，取值范圍[0,1]，0表示完全透明，1表示不透明。默認(rèn)為0.9

zIndex

Number

多邊形的疊加順序。地圖上存在多個(gè)點(diǎn)標(biāo)記疊加時(shí)，通過該屬性使級(jí)別較高的點(diǎn)標(biāo)記在上層顯示，默認(rèn)50

extData

任意

用戶自定義屬性，支持JavaScript API任意數(shù)據(jù)類型，如Marker的id等

polygon 實(shí)例方法

方法名稱

返回值

說明

setPath(path:Array)

設(shè)置組成該折線的節(jié)點(diǎn)數(shù)組

getPath( )

Array

獲取折線路徑的節(jié)點(diǎn)數(shù)組

setOptions(opt:PolygonOptions)

修改多邊形屬性

getOptions( )

Object

獲取多邊形的屬性

hide( )

多邊形隱藏

show( )

多邊形顯示

getArea( )

Number

獲取多邊形的面積(單位：平方米)

getBounds( )

獲取當(dāng)前折線的矩形范圍對(duì)象

setExtData(ext:Any)

設(shè)置用戶自定義屬性，支持JavaScript API任意數(shù)據(jù)類型，如Marker的id等

getExtData( )

任意

獲取用戶自定義屬性

contains(point:Array)

Boolean

判斷指定點(diǎn)坐標(biāo)是否在多邊形范圍內(nèi)

polygon 事件

事件名稱

返回參數(shù)

說明

click

鼠標(biāo)左鍵單擊事件

dblclick

鼠標(biāo)左鍵雙擊事件

rightclick

鼠標(biāo)右鍵單擊事件

mousemove

鼠標(biāo)移動(dòng)

mouseover

鼠標(biāo)經(jīng)過時(shí)觸發(fā)事件

mouseout

鼠標(biāo)移出時(shí)觸發(fā)事件

mouseup

鼠標(biāo)后抬起時(shí)觸發(fā)事件

mousedown

鼠標(biāo)按下時(shí)觸發(fā)事件

touchstart

觸摸開始時(shí)觸發(fā)事件，僅適用移動(dòng)設(shè)備

touchmove

觸摸移動(dòng)進(jìn)行中時(shí)觸發(fā)事件，僅適用移動(dòng)設(shè)備

touchend

觸摸結(jié)束時(shí)觸發(fā)事件，僅適用移動(dòng)設(shè)備

hide

{type, target}

隱藏事件

show

{type, target}

顯示事件

change

屬性發(fā)生變化時(shí)

DrawTool.massMarks 預(yù)設(shè)參數(shù)

例：

DrawTool.massMarks(

data:Array,// data 為麻點(diǎn)數(shù)據(jù)，例 data: [{lnglat: [116.405285, 39.904989], name: i,id:1},{}, …]

opts:Object// opts 為麻點(diǎn)參數(shù)，如下所示

)

名稱

參數(shù)類型

說明

size

Array

必填參數(shù)，圖標(biāo)的尺寸，默認(rèn)[10, 14]

anchor

Array

必填參數(shù)，圖標(biāo)顯示位置偏移量，以圖標(biāo)的左上角為基準(zhǔn)點(diǎn)(0,0)點(diǎn)，默認(rèn)[3, 7]

zIndex

Number

圖層疊加的順序值，0表示最底層。默認(rèn)5

opacity

Number

圖層的透明度，取值范圍[0,1]，1代表完全不透明，0代表完全透明

zooms

Array

支持的縮放級(jí)別范圍，默認(rèn)范圍[3-18]，在PC上，取值范圍為[3-18]；在移動(dòng)設(shè)備上，取值范圍為[3-19]

alwaysRender

Boolean

表示是否在拖拽縮放過程中實(shí)時(shí)重繪，默認(rèn)true，建議超過10000的時(shí)候設(shè)置false

massMarks 實(shí)例方法

方法名稱

返回值

說明

setData(data:Object)

設(shè)置massMark展現(xiàn)的數(shù)據(jù)集，數(shù)據(jù)集格式為：, data: Array 坐標(biāo)數(shù)據(jù)集. 例：data: [{lnglat: [116.405285, 39.904989], name: i,id:1},{}, …],{}, …]}

getData()

Object

輸出massMark的數(shù)據(jù)集，數(shù)據(jù)結(jié)構(gòu)同setDatas中的數(shù)據(jù)集

hide( )

麻點(diǎn)標(biāo)記隱藏

show( )

麻點(diǎn)標(biāo)記顯示

massmarks 事件

事件名稱

返回參數(shù)

說明

complete

海量點(diǎn)加載完成事件

click

鼠標(biāo)左鍵單擊事件

dblclick

鼠標(biāo)左鍵雙擊事件

mouseover

鼠標(biāo)移入海量點(diǎn)圖標(biāo)時(shí)觸發(fā)

mouseout

鼠標(biāo)移出海量點(diǎn)圖標(biāo)時(shí)觸發(fā)

mouseup

鼠標(biāo)在海量點(diǎn)圖標(biāo)上單擊抬起時(shí)觸發(fā)

mousedown

鼠標(biāo)在海量點(diǎn)圖標(biāo)上單擊按下時(shí)觸發(fā)

touchstart

觸摸開始時(shí)觸發(fā)事件，僅適用移動(dòng)設(shè)備

touchmove

觸摸移動(dòng)進(jìn)行中時(shí)觸發(fā)事件，僅適用移動(dòng)設(shè)備

touchend

觸摸結(jié)束時(shí)觸發(fā)事件，僅適用移動(dòng)設(shè)備

DrawTool.contextMenu 預(yù)設(shè)參數(shù)

例：

var menu = DrawTool.contextMenu({

position:,

content:,

width:

});

名稱

參數(shù)類型

說明

position

Array

右鍵菜單顯示的位置，初始化一般不填，開啟時(shí)傳入?yún)?shù)

content

String

右鍵菜單內(nèi)容，初始化一般不填，調(diào)用方法增加

width

Number

右鍵菜單寬度，初始化一般不填，會(huì)自動(dòng)設(shè)置

contextMenu 實(shí)例方法

方法名稱

返回值

說明

addItem(text:String,fn:Function,num:Number)

右鍵菜單中添加菜單項(xiàng)。參數(shù)text:菜單顯示內(nèi)容；fn：該菜單下需進(jìn)行的操作；num：當(dāng)前菜單項(xiàng)在右鍵菜單中的排序位置，以0開始

removeItem(text:String,fn:Function)

刪除一個(gè)菜單項(xiàng)

open(map:Map,position:Array)

在地圖的指定位置打開右鍵菜單。

close( )

關(guān)閉右鍵菜單

事件

事件名稱

返回參數(shù)

說明

open

{type, target}

右鍵菜單打開事件

close

{type, target}

右鍵菜單關(guān)閉事件

InfoWindow

例：

new MapTool(["Map","InfoWindow"],

// 傳入用戶配置參數(shù)，非必填(組件內(nèi)預(yù)設(shè)默認(rèn)參數(shù))；

{

InfoWindow:{

center:[116.397428, 39.90923],

zoom:12

}

}

)

預(yù)設(shè)參數(shù)

名稱

參數(shù)類型

說明

isCustom

Boolean

是否自定義窗體。設(shè)為true時(shí)，信息窗體外框及內(nèi)容完全按照content所設(shè)的值添加，默認(rèn)false

autoMove

Boolean

是否自動(dòng)調(diào)整窗體到視野內(nèi)(當(dāng)信息窗體超出視野范圍時(shí)，通過該屬性設(shè)置是否自動(dòng)平移地圖，使信息窗體完全顯示)，默認(rèn)true

closeWhenClickMap

Boolean

控制是否在鼠標(biāo)點(diǎn)擊地圖后關(guān)閉信息窗體，默認(rèn)false

content

String

顯示內(nèi)容，可以是HTML要素字符串

offset

Array

相對(duì)于基點(diǎn)的偏移量

position

Array

信息窗體顯示基點(diǎn)位置

showShadow

Boolean

Boolean 控制是否顯示信息窗體陰影，取值false時(shí)不顯示窗體陰影，取值true時(shí)顯示窗體陰影，默認(rèn)false

實(shí)例方法

方法名稱

返回值

說明

open(map:Map,pos:Array)

在地圖的指定位置打開信息窗體

close( )

關(guān)閉信息窗體

setContent(content:String)

設(shè)置信息窗體內(nèi)容，可通過該函數(shù)動(dòng)態(tài)更新信息窗體中的信息

getContent( )

String

獲取信息窗體內(nèi)容 ，結(jié)果以字符串方式返回

setPosition(lnglat:Array)

設(shè)置信息窗體顯示基點(diǎn)位置

事件

事件名稱

返回參數(shù)

說明

open

信息窗體打開事件

close

信息窗體關(guān)閉事件

change

屬性發(fā)生變化時(shí)

District

例：

new MapTool(["Map","District"],

// 傳入用戶配置參數(shù)，非必填(組件內(nèi)預(yù)設(shè)默認(rèn)參數(shù))；

{

District:{

level:"district",// 行政區(qū)級(jí)別或商圈，默認(rèn)區(qū)縣

showbiz:true,// 是否顯示商圈，默認(rèn)值true

extensions: "all",// 是否返回行政區(qū)邊界坐標(biāo)點(diǎn)

subdistrict: 1// 顯示下級(jí)行政區(qū)級(jí)數(shù)

}

}

)

預(yù)設(shè)參數(shù)

名稱

參數(shù)類型

說明

level

String

關(guān)鍵字對(duì)應(yīng)的行政區(qū)級(jí)別或商圈，可選值：country：國(guó)家；province：省/直轄市；city：市；district：區(qū)/縣；biz_area：商圈，默認(rèn)"district"

showbiz

Boolean

是否顯示商圈，默認(rèn)true

extensions

String

是否返回行政區(qū)邊界坐標(biāo)點(diǎn)，默認(rèn)all，返回完整行政區(qū)邊界坐標(biāo)點(diǎn)；取值：base，不返回行政區(qū)邊界坐標(biāo)點(diǎn)

subdistrict

Number

顯示下級(jí)行政區(qū)級(jí)數(shù)(行政區(qū)級(jí)別包括：國(guó)家、省/直轄市、市、區(qū)/縣4個(gè)級(jí)別)，商圈為區(qū)/縣下一級(jí) 可選值：0(不返回下級(jí)行政區(qū))、1(返回下一級(jí)行政區(qū))、2(返回下兩級(jí)行政區(qū))、3(返回下三級(jí)行政區(qū))默認(rèn)1

實(shí)例方法

方法名稱

返回值

說明

setLevel(level:String)

設(shè)置關(guān)鍵字對(duì)應(yīng)的行政區(qū)級(jí)別或商圈，可選值如上

setSubdistrict(district:Number)

設(shè)置下級(jí)行政區(qū)級(jí)數(shù)，可選值如上

search(keywords:String ,callback:function(status:String,result:infoDistrictSearchResult), opts:DistrictSearchOptions )

根據(jù)關(guān)鍵字查詢行政區(qū)或商圈信息 關(guān)鍵字支持：行政區(qū)名、citycode、adcode、商圈名默認(rèn)值：“全國(guó)”當(dāng)status為complete時(shí)，result為DistrictSearchResult；當(dāng)status為error時(shí)，result為錯(cuò)誤信息info；當(dāng)status為no_data時(shí)，代表檢索返回0結(jié)果

事件

事件名稱

返回參數(shù)

說明

error

當(dāng)查詢失敗時(shí)觸發(fā)此事件

MouseTool

實(shí)例方法

方法名稱

返回值

說明

marker( options：MarkerOptions )

開啟鼠標(biāo)畫點(diǎn)標(biāo)注模式。鼠標(biāo)在地圖上單擊繪制點(diǎn)標(biāo)注，標(biāo)注樣式參考MarkerOptions設(shè)置

polyline( options：PolylineOptions )

開啟鼠標(biāo)畫折線模式。鼠標(biāo)在地圖上點(diǎn)擊繪制折線，鼠標(biāo)左鍵雙擊或右鍵單擊結(jié)束繪制，折線樣式參考PolylineOptions設(shè)置

polygon( options：PolygonOptions )

開啟鼠標(biāo)畫多邊形模式。鼠標(biāo)在地圖上單擊開始繪制多邊形，鼠標(biāo)左鍵雙擊或右鍵單擊結(jié)束當(dāng)前多邊形的繪制，多邊形樣式參考PolygonOptions設(shè)置

rectangle( options：PolygonOptions )

開啟鼠標(biāo)畫矩形模式。鼠標(biāo)在地圖上拉框即可繪制相應(yīng)的矩形。矩形樣式參考PolygonOptions設(shè)置

rectZoomIn( options：PolygonOptions )

開啟鼠標(biāo)拉框放大模式。鼠標(biāo)可在地圖上拉框放大地圖。矩形框樣式參考PolygonOptions設(shè)置

rectZoomOut( options：PolygonOptions )

開啟鼠標(biāo)拉框縮小模式。鼠標(biāo)可在地圖上拉框縮小地圖。矩形框樣式參考PolygonOptions設(shè)置

close( Boolean)

關(guān)閉當(dāng)前鼠標(biāo)操作。參數(shù)arg設(shè)為true時(shí)，鼠標(biāo)操作關(guān)閉的同時(shí)清除地圖上繪制的所有覆蓋物對(duì)象；設(shè)為false時(shí)，保留所繪制的覆蓋物對(duì)象。默認(rèn)false

事件

事件名稱

參數(shù)

說明

draw

{type,obj}

鼠標(biāo)工具繪制覆蓋物結(jié)束時(shí)觸發(fā)此事件，obj對(duì)象為繪制出來的覆蓋物對(duì)象

PolyEditor

方法名稱

返回值

說明

get( polygon/polyline:Object )

editor:Object

返回一個(gè)對(duì)應(yīng)的編輯對(duì)象實(shí)例

editor 實(shí)例方法

方法名稱

返回值

說明

open

打開編輯功能。 功能開啟后，多邊形/折線上顯示可編輯點(diǎn)，其中不透明點(diǎn)為實(shí)際結(jié)點(diǎn)，鼠標(biāo)左鍵單擊該類節(jié)點(diǎn)可進(jìn)行刪除操作；半透明點(diǎn)為虛擬節(jié)點(diǎn)，單擊該類節(jié)點(diǎn)將為多邊形/折線新增結(jié)點(diǎn)；實(shí)際結(jié)點(diǎn)和虛擬節(jié)點(diǎn)均可進(jìn)行拖動(dòng)操作，以改變多邊形/折線的形狀

close

關(guān)閉編輯功能

事件

事件名稱

返回參數(shù)

說明

addnode

通過鼠標(biāo)在折線上增加一個(gè)節(jié)點(diǎn)或在多邊形上增加一個(gè)頂點(diǎn)時(shí)觸發(fā)此事件

adjust

鼠標(biāo)調(diào)整折線上某個(gè)節(jié)點(diǎn)或多邊形上某個(gè)頂點(diǎn)的位置時(shí)觸發(fā)此事件

removenode

通過鼠標(biāo)在折線上刪除一個(gè)節(jié)點(diǎn)或在多邊形上刪除一個(gè)頂點(diǎn)時(shí)觸發(fā)此事件

end

{type,target}

在調(diào)用close方法時(shí)，觸發(fā)該事件，target即為編輯后的折線/多邊形對(duì)象

Locate

預(yù)設(shè)參數(shù)

名稱

參數(shù)類型

說明

enableHighAccuracy

Boolean

是否采用高精度，默認(rèn)true

timeout

Number

超時(shí)毫秒數(shù)，默認(rèn)無窮大

GeoLocationFirst

Boolean

設(shè)置為true的時(shí)候可以調(diào)整PC端為優(yōu)先使用瀏覽器定位，失敗后使用IP定位，默認(rèn)false

showButton

Boolean

是否顯示定位按鈕，默認(rèn)true

buttonDom

String

自定義定位按鈕的內(nèi)容。可支持HTML代碼，不設(shè)置該屬性則使用默認(rèn)按鈕樣式

showMarker

Boolean

定位成功時(shí)是否在定位位置顯示一個(gè)Marker默認(rèn)true

markerOptions

markerOptions

定位點(diǎn)Marker的配置，不設(shè)置該屬性則使用默認(rèn)Marker樣式

showCircle

Boolean

定位成功并且有精度信息時(shí)，是否用一個(gè)圓圈circle表示精度范圍，默認(rèn)true

panToLocation

Boolean

定位成功后，是否把定位得到的坐標(biāo)設(shè)置為地圖中心點(diǎn)坐標(biāo)，默認(rèn)true

zoomToAccuracy

Boolean

定位成功且顯示精度范圍時(shí)，是否把地圖視野調(diào)整到正好顯示精度范圍，默認(rèn)false

實(shí)例方法

方法名稱

返回值

說明

isSupported

Boolean

是否支持瀏覽器定位，當(dāng)不支持是getCurrentPosition也會(huì)使用嘗試進(jìn)行精確IP定位

getCurrentPosition(callback:function(status,result){})

獲取用戶當(dāng)前的精確位置信息當(dāng)回調(diào)函數(shù)中的status為complete的時(shí)候表示定位成功，result為GeolocationResult對(duì)象;當(dāng)回調(diào)函數(shù)中的status為error的時(shí)候表示定位失敗，result為GeolocationError對(duì)象； callback的方式和事件監(jiān)聽的方式二者選擇一種即可。

事件

事件名稱

參數(shù)

說明

complete

定位成功時(shí)觸發(fā)此事件

Events 事件綁定與解綁

針對(duì)Map、覆蓋物等常用類，可以直接使用類的對(duì)象的on、off成員方法來實(shí)現(xiàn)事件的簡(jiǎn)單綁定和移除

例：

var marker = drawTool.marker();

marker.on("click",function(e){

e.target.getPosition();

})

方法名稱

返回值

說明

on(eventName, handler, context)

注冊(cè)事件，給Map或者覆蓋物對(duì)象注冊(cè)事件。eventName：事件名稱(必填)，handler：事件回調(diào)函數(shù)(必填)，context：事件回調(diào)中的上下文(可選，缺省時(shí)，handler中this為調(diào)用on方法的對(duì)象本身，否則this指向context引用的對(duì)象)

注意：多次綁定時(shí)，當(dāng)eventName、handler函數(shù)對(duì)象、context對(duì)象有任意一個(gè)不一樣就會(huì)再次綁定

off(eventName, handler, context)

移除事件綁定。eventName：事件名稱(必填)，handler：事件功能函數(shù)(必填)，context：事件上下文(可選，缺省時(shí)為調(diào)用off方法的對(duì)象本身，否則為context引用的對(duì)象)

注意：只有當(dāng)off與on的eventName、handler函數(shù)對(duì)象、context對(duì)象完全一致時(shí)才能有效移除監(jiān)聽

Events

mouseTool等工具需要借助這一方法進(jìn)行事件綁定。

方法名稱

返回值

說明

on(target,eventName, handler, context)

EventListener

注冊(cè)事件，給Map或者覆蓋物對(duì)象注冊(cè)事件。target：注冊(cè)事件對(duì)象，eventName：事件名稱(必填)，handler：事件回調(diào)函數(shù)(必填)，context：事件回調(diào)中的上下文(可選，缺省時(shí)，handler中this為調(diào)用on方法的對(duì)象本身，否則this指向context引用的對(duì)象)

注意：多次綁定時(shí)，當(dāng)eventName、handler函數(shù)對(duì)象、context對(duì)象有任意一個(gè)不一樣就會(huì)再次綁定

off(listener)

刪除由上述on方法傳回的指定偵聽器

附錄

事件觸發(fā)返回的對(duì)象 MapsEvent

此對(duì)象用于表示地圖、覆蓋物、疊加層上的各種鼠標(biāo)事件返回，包含以下字段：

名稱

類型

說明

lnglat

LngLat

發(fā)生事件時(shí)光標(biāo)所在處的經(jīng)緯度坐標(biāo)

type

String

事件類型

target

Object

發(fā)生事件的目標(biāo)對(duì)象

地理位置 Lnglat

經(jīng)緯度坐標(biāo)，確定地圖上的一個(gè)點(diǎn)。

方法名稱

返回值

說明

getLng( )

Number

獲取經(jīng)度值

getLat( )

Number

獲取緯度值

toString( )

String

LngLat對(duì)象以字符串的形式返回

范圍對(duì)象 Bounds

地物對(duì)象的經(jīng)緯度矩形范圍。

方法名稱

返回值

說明

contains(point：Array)

Boolean

指定點(diǎn)坐標(biāo)是否在矩形范圍內(nèi)

getCenter( )

獲取當(dāng)前Bounds的中心點(diǎn)經(jīng)緯度坐標(biāo)

定位返回結(jié)果對(duì)象 GeolocationResult

屬性

類型

說明

position

定位結(jié)果

accuracy

Number

精度范圍，單位：米

location_type

String

定位結(jié)果的來源，可能的值有:'html5'、'ip'、'sdk'

message

String

形成當(dāng)前定位結(jié)果的一些信息

isConverted

Boolean

是否經(jīng)過坐標(biāo)糾偏

info

String

狀態(tài)信息 "SUCCESS"

formattedAddress

String

地址

addressComponent

地址信息

定位失敗返回結(jié)果 GeolocationError

屬性

類型

說明

message

String

造成定位失敗結(jié)果的一些有用信息

info

String

錯(cuò)誤信息 NOT_SUPPORTED 不支持定位；FAILED定位失敗，具體原因見message

行政區(qū)查詢結(jié)果 DistrictSearchResult

屬性

類型

說明

name

String

行政區(qū)名稱

center

城市中心點(diǎn)經(jīng)緯度坐標(biāo)

citycode

String

行政編碼

adcode

String

區(qū)域編碼

level

String

行政區(qū)級(jí)別

boundary

extensions為“all”時(shí)，行政區(qū)邊界坐標(biāo)集合若行政區(qū)包含群島，則坐標(biāo)點(diǎn)為各島的邊界，島間邊界經(jīng)緯度使用"|"分隔

districtList

下級(jí)行政區(qū)信息列表,subdistrict 為0時(shí)，不返回該對(duì)象

總結(jié)

以上是生活随笔為你收集整理的高德地图markevents_GitHub - mingxuWang/Map: 高德地图API二次封装的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。