【Leafletjs】2.添加marker到地图

2023-07-27 18:35:52

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

码农公寓