Map組件設計文檔

組件設計目的

分析當前各業務方向(銷售端、商城、數據可視化、TMS)內地圖相關應用的地圖功能使用情況，封裝Map組件供給各業務向進行使用。

將高德地圖API進行二次封裝，降低地圖相關功能學習代價，方便地圖相關應用開發。

適用場景

用戶定位

銷售端 商城 中進行的用戶位置確定，坐標上傳等

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

MIS中 銷售校準點 銷售坐標點 超市注冊點等點位置展示

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

手動進行覆蓋物繪制與編輯(點 線 面)

MIS中 客服校準點標注；區域限制售賣 區域繪制與編輯

行政區域范圍查詢

TMS中 配送方案中區域選擇

組件特性

組件化的使用方式，按需加載相關功能并返回實例

組件使用方法

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

組件暴露一個$.Deferred對象，即module.exports = MapTool;，使得用戶的使用方式更簡單，具體使用方式如下：

// 先引入組件

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

// 在頂部先定義相應功能變量

var map,drawTool,infoWindow;

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

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

// 傳入用戶配置參數，非必填(組件內預設默認參數)；

{

Map:{

center:[116.397428, 39.90923],

zoom:12

}

}

).then(function(toolList){

// 加載成功后會按順序返回相應的功能實例

map = toolList[0];

drawTool = toolList[1];

infoWindow = toolList[2];

// 此時可以開始執行與地圖加載有關的操作，回調函數無需傳入

action();

}).fail(function(){

// 失敗處理的內容

var error = arguments[0][0];

console.log(error.msg);

})

API

功能列表

功能名稱

說明

Map

提供地圖顯示功能，返回一個AMap.Map的實例對象

DrawTool

提供覆蓋物的繪制功能，包括點 圓 折線 多邊形 麻點 右鍵菜單的繪制，調用相關方法進行繪制后會返回相應的繪制對象 依賴Map功能

InfoWindow

提供信息窗體展示功能，返回一個 AMap.InfoWindow的實例對象，提供常用的打開窗體、設置窗體內容等功能 依賴Map功能

District

提供行政區查詢服務，提供全國各省、市、縣、區的中心點經緯度、行政區邊界坐標組、下級行政區等信息

MouseTool

提供地圖上的手動繪制功能，可包括點 折線 面等覆蓋物 依賴Map功能

PolyEditor

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

Locate

提供定位功能

Events

提供事件綁定功能

MapTool

構造函數

返回值

說明

MapTool(pluginList:Array,options:Object)

$.Deferred

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

例：

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

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

// 傳入用戶配置參數，非必填(組件內預設默認參數)；

{

Map:{

center:[116.397428, 39.90923],

zoom:12

}

}

).then(function(toolList){

// 加載成功后會按順序返回相應的功能實例

map = toolList[0];

drawTool = toolList[1];

infoWindow = toolList[2];

// 此時可以開始執行與地圖加載有關的操作，回調函數無需傳入

action();

}).fail(function(){

// 失敗處理的內容

var error = arguments[0][0];

console.log(error.msg);

});

Map

預設參數

名稱

參數類型

說明

container

String

地圖容器id 必填

zoom

Number

地圖顯示的縮放級別默認4

zooms

Array

地圖顯示的縮放級別范圍，PC默認[3-18],移動端默認[3-19]

center

Array

地圖中心點坐標值[lng:經度,lat:緯度]，默認顯示用戶所在城市范圍

resizeEnable

Boolean

是否監控地圖容器尺寸變化，默認值為false

dragEnable

Boolean

地圖是否可通過鼠標拖拽平移，默認為true

zoomEnable

Boolean

地圖是否可縮放，默認值為true

實例方法

方法名稱

返回值

說明

setZoom(level:Number)

設置地圖顯示的縮放級別

setCenter(position:Array)

設置地圖顯示的中心點

setZoomAndCenter(zoomLevel:Number,center:Array)

無

地圖縮放至指定級別并以指定點為地圖顯示中心點

setCity(city:String，callback:Functon)

按照行政區名稱設置地圖顯示的中心點，行政區名稱支持中國、省、市、區/縣

setDefaultCursor(cursor:String)

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

panTo(positon:Array)

地圖中心點平移至指定點位置

setFitView(overlayList:Array)

根據地圖上添加的覆蓋物分布情況，自動縮放地圖到合適的視野級別，參數overlayList默認為當前地圖上添加的所有覆蓋物圖層

clearMap( )

刪除地圖上所有的覆蓋物

destroy( )

注銷地圖對象，并清空地圖容器

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

插件加載方法**(如果用到了組件未提供的功能插件時可以使用)**。參數name中指定需要加載的插件類型，同時加載多個插件時，以字符串數組的形式添加。在Callback回調函數中進行地圖插件的創建、插件事件的綁定等操作；插件為地圖功能的擴展，按需加載

事件

事件名稱

返回參數

說明

complete

地圖圖塊加載完成后觸發事件

click

鼠標左鍵單擊事件

dblclick

鼠標左鍵雙擊事件

rightclick

鼠標右鍵單擊事件

mapmove

地圖平移時觸發

zoomchange

地圖縮放級別更改后觸發

mousemove

鼠標在地圖上移動時觸發

mouseover

鼠標移入地圖容器內時觸發

mouseout

鼠標移出地圖容器時觸發

mouseup

鼠標在地圖上單擊抬起時觸發

mousedown

鼠標在地圖上單擊按下時觸發

resize

地圖容器大小改變事件

touchstart

觸摸開始時觸發事件，僅適用移動設備

touchmove

觸摸移動進行中時觸發事件，僅適用移動設備

touchend

觸摸結束時觸發事件，僅適用移動設備

DrawTool

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

預設參數

示例：

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

// 傳入用戶配置參數，非必填(組件內預設默認參數)；

{

drawTool:{

marker:{

// 詳細參數

},

polyline:{

// 詳細參數

},

...

}

}

)

DrawTool.marker 預設參數

名稱

參數類型

說明

position

Array

marker繪制位置，必填

offset

Array

點標記顯示位置偏移量，默認值為[-10,-34]

icon

String

content

String

點標記顯示內容，可以是HTML要素字符串。content有效時，icon屬性將被覆蓋

topWhenClick

Boolean

鼠標點擊時marker是否置頂，默認false ，不置頂

draggable

Boolean

設置點標記是否可拖拽移動，默認為false

raiseOnDrag

Boolean

設置拖拽點標記時是否開啟點標記離開地圖的效果，默認為false

zIndex

Number

點標記的疊加順序。地圖上存在多個點標記疊加時，通過該屬性使級別較高的點標記在上層顯示，默認zIndex：100

title

String

鼠標滑過點標記時的文字提示，不設置則鼠標滑過點標無文字提示

clickable

Boolean

點標記是否可點擊，默認true

extData

任意

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

marker 實例方法

方法名稱

返回值

說明

setClickable(clickable:Boolean )

設置點標記是支持鼠標單擊事件

getPosition( )

獲取點標記的位置

setPosition(lnglat:Array)

設置點標記位置例[116.082562,39.9329]

setzIndex(index:Number)

設置點標記的疊加順序，默認最先添加的點標記在最底層

hide( )

點標記隱藏

show( )

點標記顯示

`setContent(html:String

htmlDOM)`

getContent( )

String

獲取點標記內容

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

以指定的速度，點標記沿指定的路徑移動。參數path為路徑坐標串；speed為指定速度，單位：千米/小時；回調函數f為變化曲線函數，缺省為function(k){return k}；參數circlable表明是否循環執行動畫，默認為false

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

以給定速度移動點標記到指定位置。參數lnglat為指定位置，必設；speed為指定速度，單位：千米/小時；回調函數f為變化曲線函數，缺省為function(k){return k}

stopMove( )

點標記停止動畫

pauseMove()

暫停點標記的動畫效果

resumeMove()

重新開始點標記的動畫效果

setExtData(ext:Any)

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

getExtData( )

任意

獲取用戶自定義屬性

marker 事件

事件名稱

返回參數

說明

click

鼠標左鍵單擊事件

dblclick

鼠標左鍵雙擊事件

rightclick

鼠標右鍵單擊事件

mousemove

鼠標移動

mouseover

鼠標移進點標記時觸發事件

mouseout

鼠標移出點標記時觸發事件

mouseup

鼠標在點標記上按下后抬起時觸發事件

mousedown

鼠標在點標記上按下時觸發事件

dragstart

開始拖拽點標記時觸發事件

dragging

鼠標拖拽移動點標記時觸發事件

dragend

點標記拖拽移動結束觸發事件

moving

Object

點標記在執行moveTo，moveAlong動畫時觸發事件，Object對象的格式是{passedPath:Array.}。其中passedPath為Marker對象在moveAlong或者moveTo過程中已經走過的路徑。

moveend

點標記執行moveTo動畫結束時觸發事件，也可以由moveAlong方法觸發

movealong

點標記執行moveAlong動畫一次后觸發事件

touchstart

觸摸開始時觸發事件，僅適用移動設備

touchmove

觸摸移動進行中時觸發事件，僅適用移動設備

touchend

觸摸結束時觸發事件，僅適用移動設備

DrawTool.circle 預設參數

名稱

參數類型

說明

center

Array

圓心位置，必填

radius

Number

圓半徑，單位:米,默認100

zIndex

Number

圓的疊加順序。地圖上存在多個點標記疊加時，通過該屬性使級別較高的點標記在上層顯示，默認10

strokeColor

String

外邊界顏色，使用16進制顏色代碼賦值。默認值為#3366FF[亮藍色]

strokeOpacity

Number

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

strokeWeight

Number

外邊界寬度，單位：像素，默認1

strokeStyle

String

外邊界樣式，實線:solid，虛線:dashed，默認solid

fillColor

String

圓填充顏色，使用16進制顏色代碼賦值。默認值為#FFAA00[亮黃色]

fillOpacity

Number

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

extData

任意

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

circle 實例方法

方法名稱

返回值

說明

setCenter(lnglat:Array)

設置圓的中心點

getCenter( )

獲取圓中心點

getBounds( )

獲取圓外切矩形范圍

setRadius(radius:Number)

設置圓形的半徑

getRadius( )

Number

獲取圓的半徑

setOptions(opt:circleOptions)

修改圓的屬性

getOptions( )

Object

獲取圓的屬性

hide( )

圓隱藏

show( )

圓顯示

setExtData(ext:Any)

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

getExtData( )

任意

獲取用戶自定義屬性

contains(point:Array)

Boolean

判斷指定點坐標是否在圓內

circle 事件

事件名稱

返回參數

說明

click

鼠標左鍵單擊事件

dblclick

鼠標左鍵雙擊事件

rightclick

鼠標右鍵單擊事件

mouseover

鼠標經過時觸發事件

mouseout

鼠標移出時觸發事件

mouseup

鼠標后抬起時觸發事件

mousedown

鼠標按下時觸發事件

touchstart

觸摸開始時觸發事件，僅適用移動設備

touchmove

觸摸移動進行中時觸發事件，僅適用移動設備

touchend

觸摸結束時觸發事件，僅適用移動設備

hide

{type, target}

隱藏事件

show

{type, target}

顯示事件

change

屬性發生變化時

DrawTool.polyline 預設參數

名稱

參數類型

說明

path

Array

折線的節點坐標數組，必填

strokeColor

String

線條顏色，使用16進制顏色代碼賦值。默認值為#3366FF[亮藍色]

strokeOpacity

Number

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

strokeWeight

Number

線條寬度，單位：像素，默認3

strokeStyle

String

線樣式，實線:solid，虛線:dashed,默認實線

zIndex

Number

折線的疊加順序。地圖上存在多個點標記疊加時，通過該屬性使級別較高的點標記在上層顯示，默認50

extData

任意

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

polyline 實例方法

方法名稱

返回值

說明

setPath(path:Array)

設置組成該折線的節點數組

getPath( )

Array

獲取折線路徑的節點數組

setOptions(opt:PolylineOptions)

修改折線屬性

getOptions( )

Object

獲取折線的屬性

hide( )

折線隱藏

show( )

折線顯示

getLength( )

Number

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

getBounds( )

獲取當前折線的矩形范圍對象

setExtData(ext:Any)

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

getExtData( )

任意

獲取用戶自定義屬性

polyline 事件

事件名稱

返回參數

說明

click

鼠標左鍵單擊事件

dblclick

鼠標左鍵雙擊事件

rightclick

鼠標右鍵單擊事件

mouseover

鼠標經過時觸發事件

mouseout

鼠標移出時觸發事件

mouseup

鼠標后抬起時觸發事件

mousedown

鼠標按下時觸發事件

touchstart

觸摸開始時觸發事件，僅適用移動設備

touchmove

觸摸移動進行中時觸發事件，僅適用移動設備

touchend

觸摸結束時觸發事件，僅適用移動設備

hide

{type, target}

隱藏事件

show

{type, target}

顯示事件

change

屬性發生變化時

DrawTool.polygon 預設參數

名稱

參數類型

說明

path

Array

多邊形的節點坐標數組，必填

strokeColor

String

外邊界顏色，使用16進制顏色代碼賦值。默認值為#3366FF[亮藍色]

strokeOpacity

Number

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

strokeWeight

Number

外邊界寬度，單位：像素，默認3

strokeStyle

String

外邊界樣式，實線:solid，虛線:dashed，默認solid

fillColor

String

多邊形填充顏色，使用16進制顏色代碼賦值。默認值為#FFAA00[亮黃色]

fillOpacity

Number

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

zIndex

Number

多邊形的疊加順序。地圖上存在多個點標記疊加時，通過該屬性使級別較高的點標記在上層顯示，默認50

extData

任意

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

polygon 實例方法

方法名稱

返回值

說明

setPath(path:Array)

設置組成該折線的節點數組

getPath( )

Array

獲取折線路徑的節點數組

setOptions(opt:PolygonOptions)

修改多邊形屬性

getOptions( )

Object

獲取多邊形的屬性

hide( )

多邊形隱藏

show( )

多邊形顯示

getArea( )

Number

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

getBounds( )

獲取當前折線的矩形范圍對象

setExtData(ext:Any)

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

getExtData( )

任意

獲取用戶自定義屬性

contains(point:Array)

Boolean

判斷指定點坐標是否在多邊形范圍內

polygon 事件

事件名稱

返回參數

說明

click

鼠標左鍵單擊事件

dblclick

鼠標左鍵雙擊事件

rightclick

鼠標右鍵單擊事件

mousemove

鼠標移動

mouseover

鼠標經過時觸發事件

mouseout

鼠標移出時觸發事件

mouseup

鼠標后抬起時觸發事件

mousedown

鼠標按下時觸發事件

touchstart

觸摸開始時觸發事件，僅適用移動設備

touchmove

觸摸移動進行中時觸發事件，僅適用移動設備

touchend

觸摸結束時觸發事件，僅適用移動設備

hide

{type, target}

隱藏事件

show

{type, target}

顯示事件

change

屬性發生變化時

DrawTool.massMarks 預設參數

例：

DrawTool.massMarks(

data:Array,// data 為麻點數據，例 data: [{lnglat: [116.405285, 39.904989], name: i,id:1},{}, …]

opts:Object// opts 為麻點參數，如下所示

)

名稱

參數類型

說明

size

Array

必填參數，圖標的尺寸，默認[10, 14]

anchor

Array

必填參數，圖標顯示位置偏移量，以圖標的左上角為基準點(0,0)點，默認[3, 7]

zIndex

Number

圖層疊加的順序值，0表示最底層。默認5

opacity

Number

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

zooms

Array

支持的縮放級別范圍，默認范圍[3-18]，在PC上，取值范圍為[3-18]；在移動設備上，取值范圍為[3-19]

alwaysRender

Boolean

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

massMarks 實例方法

方法名稱

返回值

說明

setData(data:Object)

設置massMark展現的數據集，數據集格式為：, data: Array 坐標數據集. 例：data: [{lnglat: [116.405285, 39.904989], name: i,id:1},{}, …],{}, …]}

getData()

Object

輸出massMark的數據集，數據結構同setDatas中的數據集

hide( )

麻點標記隱藏

show( )

麻點標記顯示

massmarks 事件

事件名稱

返回參數

說明

complete

海量點加載完成事件

click

鼠標左鍵單擊事件

dblclick

鼠標左鍵雙擊事件

mouseover

鼠標移入海量點圖標時觸發

mouseout

鼠標移出海量點圖標時觸發

mouseup

鼠標在海量點圖標上單擊抬起時觸發

mousedown

鼠標在海量點圖標上單擊按下時觸發

touchstart

觸摸開始時觸發事件，僅適用移動設備

touchmove

觸摸移動進行中時觸發事件，僅適用移動設備

touchend

觸摸結束時觸發事件，僅適用移動設備

DrawTool.contextMenu 預設參數

例：

var menu = DrawTool.contextMenu({

position:,

content:,

width:

});

名稱

參數類型

說明

position

Array

右鍵菜單顯示的位置，初始化一般不填，開啟時傳入參數

content

String

右鍵菜單內容，初始化一般不填，調用方法增加

width

Number

右鍵菜單寬度，初始化一般不填，會自動設置

contextMenu 實例方法

方法名稱

返回值

說明

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

右鍵菜單中添加菜單項。參數text:菜單顯示內容；fn：該菜單下需進行的操作；num：當前菜單項在右鍵菜單中的排序位置，以0開始

removeItem(text:String,fn:Function)

刪除一個菜單項

open(map:Map,position:Array)

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

close( )

關閉右鍵菜單

事件

事件名稱

返回參數

說明

open

{type, target}

右鍵菜單打開事件

close

{type, target}

右鍵菜單關閉事件

InfoWindow

例：

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

// 傳入用戶配置參數，非必填(組件內預設默認參數)；

{

InfoWindow:{

center:[116.397428, 39.90923],

zoom:12

}

}

)

預設參數

名稱

參數類型

說明

isCustom

Boolean

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

autoMove

Boolean

是否自動調整窗體到視野內(當信息窗體超出視野范圍時，通過該屬性設置是否自動平移地圖，使信息窗體完全顯示)，默認true

closeWhenClickMap

Boolean

控制是否在鼠標點擊地圖后關閉信息窗體，默認false

content

String

顯示內容，可以是HTML要素字符串

offset

Array

相對于基點的偏移量

position

Array

信息窗體顯示基點位置

showShadow

Boolean

Boolean 控制是否顯示信息窗體陰影，取值false時不顯示窗體陰影，取值true時顯示窗體陰影，默認false

實例方法

方法名稱

返回值

說明

open(map:Map,pos:Array)

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

close( )

關閉信息窗體

setContent(content:String)

設置信息窗體內容，可通過該函數動態更新信息窗體中的信息

getContent( )

String

獲取信息窗體內容 ，結果以字符串方式返回

setPosition(lnglat:Array)

設置信息窗體顯示基點位置

事件

事件名稱

返回參數

說明

open

信息窗體打開事件

close

信息窗體關閉事件

change

屬性發生變化時

District

例：

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

// 傳入用戶配置參數，非必填(組件內預設默認參數)；

{

District:{

level:"district",// 行政區級別或商圈，默認區縣

showbiz:true,// 是否顯示商圈，默認值true

extensions: "all",// 是否返回行政區邊界坐標點

subdistrict: 1// 顯示下級行政區級數

}

}

)

預設參數

名稱

參數類型

說明

level

String

關鍵字對應的行政區級別或商圈，可選值：country：國家；province：省/直轄市；city：市；district：區/縣；biz_area：商圈，默認"district"

showbiz

Boolean

是否顯示商圈，默認true

extensions

String

是否返回行政區邊界坐標點，默認all，返回完整行政區邊界坐標點；取值：base，不返回行政區邊界坐標點

subdistrict

Number

顯示下級行政區級數(行政區級別包括：國家、省/直轄市、市、區/縣4個級別)，商圈為區/縣下一級 可選值：0(不返回下級行政區)、1(返回下一級行政區)、2(返回下兩級行政區)、3(返回下三級行政區)默認1

實例方法

方法名稱

返回值

說明

setLevel(level:String)

設置關鍵字對應的行政區級別或商圈，可選值如上

setSubdistrict(district:Number)

設置下級行政區級數，可選值如上

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

根據關鍵字查詢行政區或商圈信息 關鍵字支持：行政區名、citycode、adcode、商圈名默認值：“全國”當status為complete時，result為DistrictSearchResult；當status為error時，result為錯誤信息info；當status為no_data時，代表檢索返回0結果

事件

事件名稱

返回參數

說明

error

當查詢失敗時觸發此事件

MouseTool

實例方法

方法名稱

返回值

說明

marker( options：MarkerOptions )

開啟鼠標畫點標注模式。鼠標在地圖上單擊繪制點標注，標注樣式參考MarkerOptions設置

polyline( options：PolylineOptions )

開啟鼠標畫折線模式。鼠標在地圖上點擊繪制折線，鼠標左鍵雙擊或右鍵單擊結束繪制，折線樣式參考PolylineOptions設置

polygon( options：PolygonOptions )

開啟鼠標畫多邊形模式。鼠標在地圖上單擊開始繪制多邊形，鼠標左鍵雙擊或右鍵單擊結束當前多邊形的繪制，多邊形樣式參考PolygonOptions設置

rectangle( options：PolygonOptions )

開啟鼠標畫矩形模式。鼠標在地圖上拉框即可繪制相應的矩形。矩形樣式參考PolygonOptions設置

rectZoomIn( options：PolygonOptions )

開啟鼠標拉框放大模式。鼠標可在地圖上拉框放大地圖。矩形框樣式參考PolygonOptions設置

rectZoomOut( options：PolygonOptions )

開啟鼠標拉框縮小模式。鼠標可在地圖上拉框縮小地圖。矩形框樣式參考PolygonOptions設置

close( Boolean)

關閉當前鼠標操作。參數arg設為true時，鼠標操作關閉的同時清除地圖上繪制的所有覆蓋物對象；設為false時，保留所繪制的覆蓋物對象。默認false

事件

事件名稱

參數

說明

draw

{type,obj}

鼠標工具繪制覆蓋物結束時觸發此事件，obj對象為繪制出來的覆蓋物對象

PolyEditor

方法名稱

返回值

說明

get( polygon/polyline:Object )

editor:Object

返回一個對應的編輯對象實例

editor 實例方法

方法名稱

返回值

說明

open

打開編輯功能。 功能開啟后，多邊形/折線上顯示可編輯點，其中不透明點為實際結點，鼠標左鍵單擊該類節點可進行刪除操作；半透明點為虛擬節點，單擊該類節點將為多邊形/折線新增結點；實際結點和虛擬節點均可進行拖動操作，以改變多邊形/折線的形狀

close

關閉編輯功能

事件

事件名稱

返回參數

說明

addnode

通過鼠標在折線上增加一個節點或在多邊形上增加一個頂點時觸發此事件

adjust

鼠標調整折線上某個節點或多邊形上某個頂點的位置時觸發此事件

removenode

通過鼠標在折線上刪除一個節點或在多邊形上刪除一個頂點時觸發此事件

end

{type,target}

在調用close方法時，觸發該事件，target即為編輯后的折線/多邊形對象

Locate

預設參數

名稱

參數類型

說明

enableHighAccuracy

Boolean

是否采用高精度，默認true

timeout

Number

超時毫秒數，默認無窮大

GeoLocationFirst

Boolean

設置為true的時候可以調整PC端為優先使用瀏覽器定位，失敗后使用IP定位，默認false

showButton

Boolean

是否顯示定位按鈕，默認true

buttonDom

String

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

showMarker

Boolean

定位成功時是否在定位位置顯示一個Marker默認true

markerOptions

markerOptions

定位點Marker的配置，不設置該屬性則使用默認Marker樣式

showCircle

Boolean

定位成功并且有精度信息時，是否用一個圓圈circle表示精度范圍，默認true

panToLocation

Boolean

定位成功后，是否把定位得到的坐標設置為地圖中心點坐標，默認true

zoomToAccuracy

Boolean

定位成功且顯示精度范圍時，是否把地圖視野調整到正好顯示精度范圍，默認false

實例方法

方法名稱

返回值

說明

isSupported

Boolean

是否支持瀏覽器定位，當不支持是getCurrentPosition也會使用嘗試進行精確IP定位

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

獲取用戶當前的精確位置信息當回調函數中的status為complete的時候表示定位成功，result為GeolocationResult對象;當回調函數中的status為error的時候表示定位失敗，result為GeolocationError對象； callback的方式和事件監聽的方式二者選擇一種即可。

事件

事件名稱

參數

說明

complete

定位成功時觸發此事件

Events 事件綁定與解綁

針對Map、覆蓋物等常用類，可以直接使用類的對象的on、off成員方法來實現事件的簡單綁定和移除

例：

var marker = drawTool.marker();

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

e.target.getPosition();

})

方法名稱

返回值

說明

on(eventName, handler, context)

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

注意：多次綁定時，當eventName、handler函數對象、context對象有任意一個不一樣就會再次綁定

off(eventName, handler, context)

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

注意：只有當off與on的eventName、handler函數對象、context對象完全一致時才能有效移除監聽

Events

mouseTool等工具需要借助這一方法進行事件綁定。

方法名稱

返回值

說明

on(target,eventName, handler, context)

EventListener

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

注意：多次綁定時，當eventName、handler函數對象、context對象有任意一個不一樣就會再次綁定

off(listener)

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

附錄

事件觸發返回的對象 MapsEvent

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

名稱

類型

說明

lnglat

LngLat

發生事件時光標所在處的經緯度坐標

type

String

事件類型

target

Object

發生事件的目標對象

地理位置 Lnglat

經緯度坐標，確定地圖上的一個點。

方法名稱

返回值

說明

getLng( )

Number

獲取經度值

getLat( )

Number

獲取緯度值

toString( )

String

LngLat對象以字符串的形式返回

范圍對象 Bounds

地物對象的經緯度矩形范圍。

方法名稱

返回值

說明

contains(point：Array)

Boolean

指定點坐標是否在矩形范圍內

getCenter( )

獲取當前Bounds的中心點經緯度坐標

定位返回結果對象 GeolocationResult

屬性

類型

說明

position

定位結果

accuracy

Number

精度范圍，單位：米

location_type

String

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

message

String

形成當前定位結果的一些信息

isConverted

Boolean

是否經過坐標糾偏

info

String

狀態信息 "SUCCESS"

formattedAddress

String

地址

addressComponent

地址信息

定位失敗返回結果 GeolocationError

屬性

類型

說明

message

String

造成定位失敗結果的一些有用信息

info

String

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

行政區查詢結果 DistrictSearchResult

屬性

類型

說明

name

String

行政區名稱

center

城市中心點經緯度坐標

citycode

String

行政編碼

adcode

String

區域編碼

level

String

行政區級別

boundary

extensions為“all”時，行政區邊界坐標集合若行政區包含群島，則坐標點為各島的邊界，島間邊界經緯度使用"|"分隔

districtList

下級行政區信息列表,subdistrict 為0時，不返回該對象

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。