Leaflet：Marker、Popup類

Marker、Popup、Tooltip類都是繼承自Layer類：Event與Layer

 

Marker

1、用例

L.marker([41,123]).addTo(map);

2、實例化

L.marker(<LatLng> latlng , <Marker options> options) 

3、參數

icon //Icon實例，作為該Marker的顯示圖標。不寫則用默認Marker的Icon，即我們之前給出的那個Marker圖像
keyboard //是否用鍵盤標記該Marker，如果是true，你可以通過按回車鍵實現點擊該Marker的功能，默認true
title //一個顯示在Marker上的Browser Tooltip，鼠標在Marker上懸停一段時間可以看到
zIndexOffset //標識Marker的zIndex，如果一個兩個Marker相距很近，則在地圖上表示時，高zIndex的Marker會覆蓋在低zIndex的上邊
opcity //透明度 0-1
riseOnHover //默認false，如果設置為true，那么當你鼠標移到該Marker上時它會覆蓋在其他Marker上邊。但是當移開鼠標后，它跟其他Marker的位置關系還是遵從於zIndex的大小
riseOffset //riseOnHover的機制是，鼠標懸停的Marker的zIndex加上riseOffset得到一個新的zIndex，鼠標懸停處的Marker會覆蓋在所有小於該新的zIndex的Marker之上；默認250

//與拖動(Draggable)相關的參數
draggable //是否可拖動，默認false
autoPan //當拖動該Marker到地圖邊緣時，地圖是否發生平移(以使可以把該Marker拖動到更遠的范圍)，默認false
autoPanPadding //當Marker離地圖邊緣多近時，地圖開始平移
autoPanSpeed //平移速度(單位pixel)

4、方法

除了可以用繼承而來的Layer的方法外，Marker還有一些特有的方法：

getLatLng() //返回Marker的地理坐標，LatLng類型
setLatLng(<LatLng>latlng) //改變Marker位置到給定坐標
serZIndexOffset(n) //改變該Marker的zIndex offset
setOpacity(n) //改變透明度

5、Properties

Handler

dragging //類型是Handler，是Marker進行dragging時的Handler。

例子：

marker.dragging.disable();//不允許Marker進行拖動

 

Popup

用Map.openPopup()一次打開一個Popup，用Map.addLayer()可以打開任意多的Popup。

如果僅僅想為一個Layer對象，比如Marker或者Polygon等添加一個Popup並且打開，那很簡單：

marker.bindPopup(Content).openPopup();

下面這個例子，是通過創建Popup對象的方式顯示Popup：

var popup =L.popup()
                .setLatLng(latlng)
                .setContent(Content)
                .openOn(map);

 

1、實例化

L.popup(options? )

2、參數

maxWidth //最大寬度，單位pixel
minWidth
maxHeight
autoPan //默認true，如果設置為false，那么在Map將不會把視角移動到該Popup處
keepInView //默認false，如果設置為true，那么你拖動地圖時沒辦法把該popup移動到視圖以外。
//但是關上該Popup后就可以拖動了，所以該參數只是保證Popup本身始終在視圖以內
//如果之前有一個Popup已經打開，請保證它們在同一個視圖內，否則會錯誤

closeButton //默認true，如果設置為false，那么popup右上角將不會顯示關閉的×
autoClose //默認true，如果設置為false，那么在打開另一個Popup時該Popup將不會關閉

3、方法

getLatLng() //返回地理坐標
setLatLng(<LatLng>latlng)
getContent()
setContent(Content)
update()     //更新該Popup的內容、布局以及位置
bringToFront() //將該Popup覆蓋顯示在其他Popup之前
bringToBack() //將該Popup顯示在其他Popup之后
openOn(<Map> map)//在map上顯示該Popup同時關閉之前的Popup，效果等同於map.openPopup(popup)

4、補充

三種打開Popup的方法：

//假設該Popup對象為popup
//1、Map.openPopup
map.openPopup(popup)

//2、popup
popup.addTo(leafletMap)
popup.openOn(leafletMap)//關閉之前所有的Popup

//3、Layer.openPopup
var marker =L.marker(latlng).bindPopup(Content).addTo(leafletMap);
marker.openPopup();

只有popup.openOn(leafletMap)會關閉之前的所有Popup，而剩下三種只有在點擊時才會關閉之前的Popup