L.Map
API各種類中的核心部分,用來在頁面中創建地圖並操縱地圖.

使用 example
構造器
構造器 |
使用 |
描述 |
L.Map( <HTMLElement|String> id, <Map options> options? ) |
new L.Map(
L.map( |
通過div元素和帶有地圖選項的描述的文字對象來實例化一個地圖對象,其中文字對象是可選的。 |
Options
Map State Options
選項 |
類型 |
默認值 |
描述 |
center |
LatLng |
null |
初始化地圖的地理中心. |
zoom |
Number |
null |
初始化地圖的縮放. |
layers |
ILayer[] |
null |
初始化后加載到地圖上的圖層. |
minZoom |
Number |
null |
地圖的最小視圖。可以重寫地圖圖層的minZoom. |
maxZoom |
Number |
null |
地圖的最大視圖。可以重寫地圖圖層的maxZoom . |
maxBounds |
LatLngBounds |
null |
當這個選項被設置后,地圖被限制在給定的地理邊界內,當用戶平移將地圖拖動到視圖以外的范圍時會出現彈回的效果, 並且也不允許縮小視圖到給定范圍以外的區域(這取決於地圖的尺寸)。 使用setMaxBounds方法可以動態地設置這種約束. |
crs |
CRS |
L.CRS. EPSG3857 |
使用的坐標系,當你不確定坐標系是什么時請不要更改. |
Interaction Options
選項 |
類型 |
默認值 |
描述 |
dragging |
Boolean |
true |
決定地圖是否可被鼠標或觸摸拖動. |
touchZoom |
Boolean |
true |
決定地圖是否可被兩只手指觸摸拖拽縮放. |
scrollWheelZoom |
Boolean |
true |
決定地圖是否被被鼠標滾輪滾動縮放. |
doubleClickZoom |
Boolean |
true |
決定地圖是否可被雙擊縮放. |
boxZoom |
Boolean |
true |
決定地圖是否可被縮放到鼠標拖拽出的矩形的視圖,鼠標拖拽時需要同時按住shift鍵. |
tap |
Boolean |
true |
Enables mobile hacks for supporting instant taps (fixing 200ms click delay on iOS/Android) and touch holds (fired as contextmenu events). |
tapTolerance |
Number |
15 |
The max number of pixels a user can shift his finger during touch for it to be considered a valid tap. |
trackResize |
Boolean |
true |
確定地圖在窗口尺寸改變時是否可以自動處理瀏覽器以更新視圖. |
worldCopyJump |
Boolean |
false |
當這個選項可用時,當你平移地圖到其另一個領域時會被地圖捕獲到,並無縫地跳轉到原始的領域以保證所有標注、矢量圖層之類的覆蓋物仍然可見. |
closePopupOnClick |
Boolean |
true |
當你不想用戶點擊地圖關閉消息彈出框時,請將其設置為false . |
Keyboard Navigation Options
選項 |
類型 |
默認值 |
描述 |
keyboard |
Boolean |
true |
聚焦到地圖且允許用戶通過鍵盤的方向鍵和+ /- 鍵來漫游地圖. |
keyboardPanOffset |
Number |
80 |
確定按鍵盤方向鍵時地圖平移的像素. |
keyboardZoomOffset |
Number |
1 |
確定鍵盤+ or - 鍵對於的縮放級數. |
Panning Inertia Options
選項 |
類型 |
默認值 |
描述 |
inertia |
Boolean |
true |
如果該選項可用,在拖動和在某一時間段內持續朝同一方向移動建有動力的地圖時,會有慣性的效果. |
inertiaDeceleration |
Number |
3000 |
確定慣性移動減速的速率,單位是像素每秒的二次方2. |
inertiaMaxSpeed |
Number |
1500 |
慣性移動的最大速度,單位是像素每秒. |
inertiaThreshold |
Number |
depends |
放開鼠標或是觸摸來停止慣性移動與移動停止之間的毫秒數. |
Control options
選項 |
類型 |
默認值 |
描述 |
zoomControl |
Boolean |
true |
確定zoom control是否默認加載在地圖上 . |
attributionControl |
Boolean |
true |
確定attribution control是否默認加載在地圖上. |
Animation options
選項 |
類型 |
默認值 |
描述 |
fadeAnimation |
Boolean |
depends |
確定瓦片淡出動畫是否可用。通常默認在所有瀏覽器中都支持CSS3轉場,android例外. |
zoomAnimation |
Boolean |
depends |
確定瓦片縮放動畫是否可用。通常默認在所有瀏覽器中都支持CSS3轉場,android例外. |
zoomAnimationThreshold |
Number |
4 |
Won't animate zoom if the zoom difference exceeds this value. |
markerZoomAnimation |
Boolean |
depends |
確定注記的縮放是否隨地圖縮放動畫而播放,如果被禁用,注記在動畫中拉長時會消失。通常默認在所有瀏覽器中都支持CSS3轉場,android例外. |
Events
You can subscribe to the following events using these methods.
Event |
Data |
描述 |
click |
MouseEvent |
用戶點擊或觸摸地圖時觸發. |
dblclick |
MouseEvent |
用戶雙擊或連續兩次觸摸地圖時觸發. |
mousedown |
MouseEvent |
用戶按下鼠標按鍵時觸發. |
mouseup |
MouseEvent |
用戶按下鼠標按鍵時觸發. |
mouseover |
MouseEvent |
鼠標進入地圖時觸發. |
mouseout |
MouseEvent |
鼠標離開地圖時觸發. |
mousemove |
MouseEvent |
鼠標在地圖上移動時觸發. |
contextmenu |
MouseEvent |
當用戶在地圖上按下鼠標右鍵時觸發,如果有監聽器在監聽這個時間,則瀏覽器默認的情景菜單被禁用. |
focus |
Event |
當用戶在地圖上進行標引、點擊或移動時進行聚焦. |
blur |
Event |
當地圖失去焦點時觸發. |
preclick |
MouseEvent |
當鼠標在地圖上點擊之前觸發。有時會在點擊鼠標時,並在已存在的點擊事件開始處理之前想要某件事情發生時用得到. |
load |
Event |
當地圖初始化時觸發。(當地圖的中心點和縮放初次設置時). |
unload |
Event |
Fired when the map is destroyed with remove method. |
viewreset |
Event |
當地圖需要重繪內容時觸發。(通常在地圖縮放和載入時發生)這對於創建用戶自定義的疊置圖層非常有用. |
movestart |
Event |
地圖視圖開始改變時觸發。(比如用戶開始拖動地圖). |
move |
Event |
所有的地圖視圖移動時觸發. |
moveend |
Event |
當地圖視圖結束改變時觸發。(比如用戶停止拖動地圖). |
dragstart |
Event |
用戶開始拖動地圖時觸發. |
drag |
Event |
用戶拖動地圖時不斷重復地觸發. |
dragend |
Event |
用戶停止拖動時觸發. |
zoomstart |
Event |
當地圖縮放即將發生時觸發。(比如縮放動作開始前). |
zoomend |
Event |
當地圖縮放時觸發. |
zoomlevelschange |
Event |
Fired when the number of zoomlevels on the map is changed due to adding or removing a layer. |
resize |
ResizeEvent |
Fired when the map is resized. |
autopanstart |
Event |
打開彈出窗口時地圖開始自動平移時觸發. |
layeradd |
LayerEvent |
當一個新的圖層添加到地圖上時觸發. |
layerremove |
LayerEvent |
當一些圖層從地圖上移除時觸發. |
baselayerchange |
LayerEvent |
當通過layer control改變基礎圖層時觸發. |
overlayadd |
LayerEvent |
Fired when an overlay is selected through the layer control. |
overlayremove |
LayerEvent |
Fired when an overlay is deselected through the layer control. |
locationfound |
LocationEvent |
當地理尋址成功時觸發(使用locate方法) |
locationerror |
ErrorEvent |
當地理尋址錯誤時觸發(使用locate方法) |
popupopen |
PopupEvent |
當彈出框打開時觸發(使用openPopup 方法) |
popupclose |
PopupEvent |
當彈出框關閉時觸發(使用closePopup 方法) |
地圖狀態修改
方法 |
返回值 |
描述 |
setView( <LatLng> center, <Number> zoom, <zoom/pan options> options? ) |
this |
設定地圖(設定其地理中心和縮放). |
setZoom( <Number> zoom, <zoom options> options? ) |
this |
設定地圖的縮放. |
zoomIn( <Number> delta?, <zoom options> options? ) |
this |
通過delta變量放大地圖的級別,1是delta的默認值. |
zoomOut( <Number> delta?, <zoom options> options? ) |
this |
通過delta變量縮小地圖的級別,1是delta的默認值. |
setZoomAround( <LatLng> latlng, <Number> zoom, <zoom options> options? ) |
this |
Zooms the map while keeping a specified point on the map stationary (e.g. used internally for scroll zoom and double-click zoom). |
fitBounds( <LatLngBounds> bounds, <fitBounds options> options? ) |
this |
將地圖視圖盡可能大地設定在給定的地理邊界內. |
fitWorld( <fitBounds options> options? ) |
this |
將地圖視圖盡可能大地設定在包含全部地域的級別上. |
panTo( <LatLng> latlng, <pan options> options? ) |
this |
將地圖平移到給定的中心。如果新的中心點在屏幕內與現有的中心點不同則產生平移動作. |
panInsideBounds( <LatLngBounds> bounds ) |
this |
平移地圖到坐落於給定邊界最接近的視圖內. |
panBy( <Point> point, <pan options> options? ) |
this |
通過給定的像素值對地圖進行平移. |
invalidateSize( <Boolean> options?, <zoom/pan options> options? ) |
this |
檢查地圖容器的大小是否改變並更新地圖,如果是這樣的話,在動態改變地圖大小后調用,如果animate是true的話,對地圖進行更新. |
setMaxBounds( <LatLngBounds> bounds, <zoom/pan options> options? ) |
this |
將地圖限定在給定的邊界內 (map maxBounds). |
locate( <Locate options> options? ) |
this |
用地理定位接口Geolocation API獲取用戶位置信息,在成功定位或定位出錯產生locationerror后解除location-found事件與定位數據,且將地圖視圖設定到檢測的確切的用戶的位置(如果定位失敗則回到地域視圖)。在Locate options中有更多詳細內容。 |
stopLocate() |
this |
Stops watching location previously initiated by map.locate({watch: true}) and aborts resetting the map view if map.locate was called with {setView: true} . |
remove() |
this |
Destroys the map and clears all related event listeners. |
獲取地圖狀態
方法 |
返回值 |
描述 |
getCenter() |
LatLng |
返回地圖視圖的地理中心. |
getZoom() |
Number |
獲取地圖視圖現在所處的縮放級別. |
getMinZoom() |
Number |
返回地圖最小的縮放級別. |
getMaxZoom() |
Number |
返回地圖最大的縮放級別. |
getBounds() |
LatLngBounds |
返回地圖視圖的經緯度邊界. |
getBoundsZoom( <LatLngBounds> bounds, <Boolean> inside? ) |
Number |
返回適應整個地圖視圖邊界的最大縮放級別。如果inside的設置時true,這個方法返回適應整個地圖視圖邊界的最小縮放級別. |
getSize() |
Point |
返回現有地圖容器的大小. |
getPixelBounds() |
Bounds |
返回地圖視圖在像素投影坐標系下的邊界。(很多時候對用戶自定義圖層和疊加很有用). |
getPixelOrigin() |
Point |
返回地圖圖層像素投影坐標系下的左上角的點。(很多時候對用戶自定義圖層和疊加很有用). |
圖層控制/h3>
方法 |
返回值 |
描述 |
addLayer( <ILayer> layer, <Boolean> insertAtTheBottom? ) |
this |
將圖層添加到地圖上。如果insertAtTheBottom的選項為true,圖層添加時在所以圖層之下。(在切換基底圖時比較有用). |
removeLayer( <ILayer> layer ) |
this |
將圖層在地圖上移除. |
hasLayer( <ILayer> layer ) |
Boolean |
如果添加的圖層是當前圖層則返回true. |
addControl( <IControl> control ) |
this |
在地圖上添加控制選項. |
removeControl( <IControl> control ) |
this |
在地圖上移除控制選項. |
轉換方法
方法 |
返回值 |
描述 |
latLngToLayerPoint( <LatLng> latlng ) |
Point |
返回地圖圖層上與地理坐標相一致的點。(在地圖上進行位置疊加時比較有用). |
layerPointToLatLng( <Point> point ) |
LatLng |
返回給定地圖上點的地理坐標系. |
containerPointToLayerPoint( <Point> point ) |
Point |
將於地圖容器相關的點轉換為地圖圖層相關的點. |
layerPointToContainerPoint( <Point> point ) |
Point |
將地圖圖層相關的點轉換為地圖容器相關的點. |
latLngToContainerPoint( <LatLng> latlng ) |
Point |
返回與給定地理坐標系相符的地圖容器的點. |
containerPointToLatLng( <Point> point ) |
LatLng |
返回給定地理容器點的地理坐標. |
project( <LatLng> latlng, <Number> zoom? ) |
Point |
將地理坐標投影到指定縮放級別的像素坐標系中. |
unproject( <Point> point, <Number> zoom? ) |
LatLng |
將像素坐標系投影到指定縮放級別的地理坐標系中。(默認為當前的縮放級別). |
mouseEventToContainerPoint( <MouseEvent> event ) |
Point |
返回鼠標點擊事件對象的像素坐標(與地圖左上角相關). |
mouseEventToLayerPoint( <MouseEvent> event ) |
Point |
返回鼠標點擊事件對象的像素坐標(與地圖圖層相關). |
mouseEventToLatLng( <MouseEvent> event ) |
LatLng |
返回鼠標點擊事件對象的地理坐標. |
其他方法
方法 |
返回值 |
描述 |
getContainer() |
HTMLElement |
返回地圖容器對象. |
getPanes() |
MapPanes |
返回不同地圖對象的邊框(疊加渲染). |
whenReady( <Function> fn, <Object> context? ) |
this |
當地圖的位置和縮放初始化好或是時間發生之后,運行給定的回調方法,通常傳遞一個函數內容. |
位置選項
選項 |
類型 |
默認值 |
描述 |
watch |
Boolean |
false |
如果該值為真,則開始利用W3C的watchPosition方法監聽位置變化情況(而不是指監聽一次)。你可以通過map.stoplocate()方法來停止監聽. |
setView |
Boolean |
false |
如果該值為真,則通過自動將地圖視圖定位到用戶一定精度范圍內的位置,如果地理定位失敗則顯示全部地圖. |
maxZoom |
Number |
Infinity |
在使用setView選項時視圖縮放的最大級別. |
timeout |
Number |
10000 |
在觸發locationerror事件之前等待地理定位的毫秒為單位的時間. |
maximumAge |
Number |
0 |
位置監聽的最大生命周期。如果比最后定位回復后毫秒用時短,則locate返回一個緩存位置. |
enableHighAccuracy |
Boolean |
false |
開啟高精度,參加 W3C SPEC的描述. |
Zoom/pan options
選項 |
類型 |
默認值 |
描述 |
reset |
Boolean |
false |
If true , the map view will be completely reset (without any animations). |
pan |
pan options |
- |
Sets the options for the panning (without the zoom change) if it occurs. |
zoom |
zoom options |
- |
Sets the options for the zoom change if it occurs. |
animate |
Boolean |
- |
An equivalent of passing animate to both zoom and pan options (see below). |
Pan options
選項 |
類型 |
默認值 |
描述 |
animate |
Boolean |
- |
If true , panning will always be animated if possible. If false , it will not animate panning, either resetting the map view if panning more than a screen away, or just setting a new offset for the map pane (except for `panBy` which always does the latter). |
duration |
Number |
0.25 |
Duration of animated panning. |
easeLinearity |
Number |
0.25 |
The curvature factor of panning animation easing (third parameter of the Cubic Bezier curve). 1.0 means linear animation, the less the more bowed the curve. |
noMoveStart |
Boolean |
false |
If true , panning won't fire movestart event on start (used internally for panning inertia). |
Zoom options
選項 |
類型 |
默認值 |
描述 |
animate |
Boolean |
- |
If not specified, zoom animation will happen if the zoom origin is inside the current view. If true , the map will attempt animating zoom disregarding where zoom origin is. Setting false will make it always reset the view completely without animation. |
fitBounds options
The same as zoom/pan options and additionally:
選項 |
類型 |
默認值 |
描述 |
paddingTopLeft |
Point |
[0,0] |
Sets the amount of padding in the top left corner of a map container that shouldn't be accounted for when setting the view to fit bounds. Useful if you have some control overlays on the map like a sidebar and you don't want them to obscure objects you're zooming to. |
paddingBottomRight |
Point |
[0,0] |
The same for bottom right corner of the map. |
padding |
Point |
[0,0] |
Equivalent of setting both top left and bottom right padding to the same value. |
Properties
M地圖屬性包括互動操作,允許你在運行環境中互動地控制地圖行為,比如通過拖拽和點擊縮放級別顯示和不顯示某要素. Example:
map.doubleClickZoom.disable();
You can also access default map controls like attribution control through map properties:
map.attributionControl.addAttribution("Earthquake data © GeoNames");
Property |
類型 |
描述 |
dragging |
IHandler |
地圖拖拽處理程序,可以通過鼠標和觸摸的形式. |
touchZoom |
IHandler |
觸摸地圖縮放處理程序. |
doubleClickZoom |
IHandler |
雙擊縮放處理程序. |
scrollWheelZoom |
IHandler |
滾動縮放處理程序. |
boxZoom |
IHandler |
矩形框(利用鼠標拖動)縮放處理程序. |
keyboard |
IHandler |
鍵盤導向處理程序. |
tap |
IHandler |
Mobile touch hacks (quick tap and touch hold) handler. |
zoomControl |
Control.Zoom |
縮放控制. |
attributionControl |
Control.Attribution |
屬性控制. |
地圖窗口
望文思義,這是一個包括可以用來放置自定義圖層的不同的地圖窗口的對象。最大的區別是圖層的疊置.
Property |
類型 |
描述 |
mapPane |
HTMLElement |
包含其他地圖窗口的窗口. |
tilePane |
HTMLElement |
切片圖層的窗口. |
objectsPane |
HTMLElement |
包含除切片窗口以外所有窗口的窗口. |
shadowPane |
HTMLElement |
用來隱藏圖層的窗口(如標注的隱藏). |
overlayPane |
HTMLElement |
這線段和多邊形一類圖層的窗口. |
markerPane |
HTMLElement |
標注圖標的窗口. |
popupPane |
HTMLElement |
彈出的窗口. |