本人建了一個Leaflet交流群：Leaflet&WebGIS 331437754
接着上篇我們在地圖中添加一個marker，非常簡單只需添加如下代碼即可：
var marker = L.marker([30, 118]) .addTo(map);
Demo：http://jsfiddle.net/shitao1988/KDr4B/1/
給這個marker添加一個彈出框
var marker = L.marker([30, 118]) .addTo(map) .bindPopup("<b>中國</b><br>安徽黃山.") .openPopup();
結果如下：
設置Marker相關屬性項：
{draggable: true, // 使圖標可拖拽
title: 'Text', // 添加一個標題
opacity: 0.5} // 設置透明度
)
Demo：http://jsfiddle.net/shitao1988/KDr4B/2/
下面是marker相關的插件：
1. Leaflet.awesome-markers：提供了豐富多彩的圖標
Demo：http://jsfiddle.net/VPzu4/92/
2.Leaflet.markercluster：強大的集聚插件
3.Leaflet.label：美化的label
4.Leaflet.AnimatedMarker：使marker沿線運動
5.leaflet.bouncemarker：加載marker時有個彈跳動畫
6.OverlappingMarkerSpiderfier-Leaflet:處理重疊在一起的markers
7.Leaflet.EdgeMarker:在邊框上顯示不在當前視野中的marker
Leaflet Marker API地址
http://leafletjs.com/reference.html#marker
Marker
用來在地圖中放置注記。
L.marker([50.5, 30.5]).addTo(map);Creation
| Factory | Description |
|---|---|
L.marker( <LatLng> latlng, <Marker options> options? ) |
通過給定一個地理點和一個具有選項的對象來實例化一個注記。 |
Options
| Option | Type | Default | Description |
|---|---|---|---|
icon |
L.Icon |
* | 圖標類用來表達注記。參加Icon documentation以了解自定義注記圖標的詳細信息。默認設置為new L.Icon.Default())。 |
clickable |
Boolean |
true |
如果是false，注記則不產生鼠標事件並表現為底層地圖的一部分。 |
draggable |
Boolean |
false |
確定注記是否可被鼠標或觸摸拖動。 |
keyboard |
Boolean |
true |
Whether the marker can be tabbed to with a keyboard and clicked by pressing enter. |
title |
String |
'' |
注記旁邊顯示瀏覽器提示的文本信息。 |
alt |
String |
'' |
Text for the alt attribute of the icon image (useful for accessibility). |
zIndexOffset |
Number |
0 |
默認情況下，注記圖片的疊置順序由緯度自動設置。如果你想將某一注記放置於其他之上可用這個選項，設置一個較大的值即可，比如1000 （或是相反地設置一個較大的負值）。 |
opacity |
Number |
1.0 |
確定注記的不透明度。 |
riseOnHover |
Boolean |
false |
如果此值為true，則當把鼠標放置於注記之上時，注記會顯示與其他注記之上。 |
riseOffset |
Number |
250 |
riseOnHover要素凸顯時高度的補償值。 |
事件/h3>
You can subscribe to the following events using these methods.
| 事件 | 數據 | 描述 |
|---|---|---|
click |
MouseEvent |
當鼠標點擊注記時觸發。 |
dblclick |
MouseEvent |
當鼠標雙擊注記時觸發。 |
mousedown |
MouseEvent |
當鼠標按下鼠標鍵時觸發。. |
mouseover |
MouseEvent |
當鼠標在注記上時觸發。. |
mouseout |
MouseEvent |
當鼠標離開注記時觸發。 |
contextmenu |
MouseEvent |
當鼠標右擊注記時觸發。 |
dragstart |
Event |
當用戶拖動注記時觸發。 |
drag |
Event |
當用戶拖動注記時不斷觸發。 |
dragend |
DragEndEvent |
當用戶停止拖動注記時觸發。 |
move |
Event |
當注記通過定義經緯度而移動時觸發。新的坐標包含事件參數。 |
add |
Event |
Fired when the marker is added to the map. |
remove |
Event |
當注記在地圖上被刪除時觸發。 |
popupopen |
PopupEvent |
Fired when a popup bound to the marker is open. |
popupclose |
PopupEvent |
Fired when a popup bound to the marker is closed. |
Methods
| 方法 | 返回值 | 描述 |
|---|---|---|
addTo( <Map> map ) |
this |
在地圖上添加注記。 |
getLatLng() |
LatLng |
返回當前注記的地理位置。 |
setLatLng( <LatLng> latlng ) |
this |
將注記位置更改到給定點。 |
setIcon( <Icon> icon ) |
this |
更改注記的圖標。 |
setZIndexOffset( <Number> offset ) |
this |
更改注記的zIndex offset |
setOpacity( <Number> opacity ) |
this |
更改注記的透明度。 |
update() |
this |
更新注記的位置，在直接更改經緯度對象的坐標時比較有用。 |
bindPopup( <String> html | <HTMLElement> el | <Popup> popup, <Popup options> options? ) |
this |
當點擊一個注記時綁定一個特定的HTML內容的彈出窗口。你也可以用Marker中的openPopup方法打開綁定的彈出窗口 |
unbindPopup() |
this |
將先前用bindPopup方法綁定的注記取消。 |
openPopup() |
this |
打開先前用 bindPopup 方法綁定的彈出框 |
getPopup() |
Popup |
Returns the popup previously bound by the bindPopup method. |
closePopup() |
this |
關閉已打開的注記的彈出框。 |
togglePopup() |
this |
Toggles the popup previously bound by the bindPopup method. |
setPopupContent( <String> html | <HTMLElement> el, <Popup options> options? ) |
this |
Sets an HTML content of the popup of this marker. |
toGeoJSON() |
Object |
Returns a GeoJSON representation of the marker (GeoJSON Point Feature). |
Interaction handlers
Interaction handlers are properties of a marker instance that allow you to control interaction behavior in runtime, enabling or disabling certain features such as dragging (see IHandler methods). Example:
marker.dragging.disable();| Property | Type | Description |
|---|---|---|
| dragging | IHandler |
Marker dragging handler (by both mouse and touch). |