本人建了一个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). |