【Leafletjs】2.添加marker到地图

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