高德地图markevents_GitHub - mingxuWang/Map: 高德地图API二次封装
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屬性規范??蔀镃SS標注中的光標樣式,如: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
自定義定位按鈕的內容??芍С諬TML代碼,不設置該屬性則使用默認按鈕樣式
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二次封装的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 三两部四海九州下一句是什么呢?
- 下一篇: 斗罗大陆魂师对决千仞雪怎么加点?