Leaflet API - Marker 标记中文文档

发布时间: 2022-10-07 所属分类: 文章标签:

当前位置：

麻辣GIS » GIS手册 » Leaflet中文API手册（V1.9） » Leaflet API - Marker 标记中文文档

本文介绍下 Leaflet 中 Marker 标记 API的详细使用说明。

Marker 标记 API 调用方法

L.Marker 用于在地图上显示可点击/可拖动的图标。扩展自 Layer。

使用示例

L.marker([50.5, 30.5]).addTo(map);

Creation

构造函数	说明
`L.marker(<LatLng> latlng, <Marker options> options?)`	给出一个地理位置和可选的参数，实例化一个Marker对象。

Options 选项

选项	类型	默认	说明
`icon`	`Icon`	`*`	用于渲染标记（marker）的图标实例。有关如何自定义标记（marker）图标的详细信息，请参阅 Icon 文档。如果未指定，`L.Icon.Default` 则使用公共实例。
`keyboard`	`Boolean`	`true`	是否可以用键盘标记并按回车键进行点击。
`title`	`String`	`''`	悬停在标记（marker）上时出现的浏览器 tooltip 提示文本内容（默认情况下没有 tooltip 提示）。对无障碍环境很有帮助。
`alt`	`String`	`'Marker'`	Icon图标的 `alt` 属性提示文本内容。对无障碍环境很有帮助。
`zIndexOffset`	`Number`	`0`	默认情况下，标记（marker）图像 zIndex 是根据其纬度自动设置的。如果您想将标记置于所有其他标记（marker）之上(或之下)，则使用此选项指定一个高值，如 `1000`(或高的负值)。
`opacity`	`Number`	`1.0`	标记（marker）的不透明度。
`riseOnHover`	`Boolean`	`false`	如果为 `true`，当你把鼠标悬停在它上面时，该标记（marker）会在其他标记之上。
`riseOffset`	`Number`	`250`	用于 `riseOnHover` 功能的 z-index 偏移。
`pane`	`String`	`'markerPane'`	`Map pane` 将添加标记图标的位置。
`shadowPane`	`String`	`'shadowPane'`	`Map pane` 将添加标记阴影的位置。
`bubblingMouseEvents`	`Boolean`	`false`	当为 `true` 时，此标记上的鼠标事件将触发地图上的相同事件(除非使用 `L.DomEvent.stopPropagation`）。
`autoPanOnFocus`	`Boolean`	`true`	When `true`, the map will pan whenever the marker is focused (via e.g. pressing `tab` on the keyboard) to ensure the marker is visible within the map's bounds

可拖动的 marker 选项

选项	类型	默认	说明
`draggable`	`Boolean`	`false`	标记（marker）是否可通过鼠标/触摸拖动。
`autoPan`	`Boolean`	`false`	将此标记（marker）拖动到其边缘附近时是否平移地图。
`autoPanPadding`	`Point`	`Point(50, 50)`	开始平移地图时距离边缘的距离（左/右和上/下，以像素为单位）。
`autoPanSpeed`	`Number`	`10`	地图应该平移的像素数。

继承自交互层的选项

选项	类型	默认	说明
`interactive`	`Boolean`	`true`	如果为 `false`，该图层将不会触发鼠标事件，并作为底层地图的一部分。

继承自 Layer 图层的选项

选项	类型	默认	说明
`attribution`	`String`	`null`	要在属性控件中显示的字符串，例如："© OpenStreetMap contributors"。它描述了一些图层信息，通常是对版权所有者和瓦片提供者的法律义务。

Events 事件

事件	数据	说明
`move`	`Event`	当标记通过 `setLatLng` 或通过 dragging 移动时触发该事件，并且旧坐标和新坐标会作为 `oldLatLng`、`latlng` 包含在事件参数中。

Dragging events 拖拽事件

事件	数据	说明
`dragstart`	`Event`	当用户开始拖动标记时触发。
`movestart`	`Event`	当标记物开始移动（因为拖动）时触发。
`drag`	`Event`	当用户拖动标记时重复触发。
`dragend`	`DragEndEvent`	当用户停止拖动标记时触发。
`moveend`	`Event`	当标记物停止移动（因为拖动）时启动。

继承自交互层的鼠标事件

事件	数据	说明
`click`	`MouseEvent`	当用户 click（或 tap）图层时触发。
`dblclick`	`MouseEvent`	当用户 double-click（或 double-tap）图层时触发。
`mousedown`	`MouseEvent`	当用户在图层上按下鼠标按钮时触发。
`mouseup`	`MouseEvent`	当用户释放在图层上按下的鼠标按钮时触发。
`mouseover`	`MouseEvent`	当鼠标进入图层时触发。
`mouseout`	`MouseEvent`	当鼠标离开图层时触发。
`contextmenu`	`MouseEvent`	当用户在图层上点击右键时触发，如果此事件有监听者，则阻止默认的浏览器上下文菜单显示。在移动设备上，当用户长按时，也会在手机上触发。

继承自 Layer 图层的事件

事件	数据	说明
`add`	`Event`	在图层添加到地图后触发
`remove`	`Event`	从地图中移除图层后触发

继承自 Layer 的弹出窗口（Popup）事件

事件	数据	说明
`popupopen`	`PopupEvent`	当绑定到该层的 popup 打开时触发
`popupclose`	`PopupEvent`	当绑定到该层的 popup 关闭时触发

继承自 Layer 图层的工具提示（Tooltip）事件

事件	数据	说明
`tooltipopen`	`TooltipEvent`	当绑定到该层的 tooltip 打开时触发。
`tooltipclose`	`TooltipEvent`	当绑定到该层的 tooltip 关闭时触发。

Methods 方法

除了共享层方法，如 addTo()、remove()、类似 bindPopup() 的 popup 方法之外，你还可以使用以下方法：

方法	返回值	说明
`getLatLng()`	`LatLng`	返回标记的当前地理位置。
`setLatLng(<LatLng> latlng)`	`this`	将标记位置更改为指定坐标。
`setZIndexOffset(<Number> offset)`	`this`	更改标记的 zIndex 偏移量。
`getIcon()`	`Icon`	返回标记使用的当前图标
`setIcon(<Icon> icon)`	`this`	更改标记图标。
`setOpacity(<Number> opacity)`	`this`	更改标记的透明度。

Other methods 其它方法

方法	返回值	说明
`toGeoJSON(<Number\|false> precision?)`	`Object`	`precision` 是坐标的小数位数，默认值是6位。返回用 `GeoJSON` 表示的标记内容（作为一个GeoJSON `Point`特征）。

继承自 Layer 图层的方法

方法	返回值	说明
`addTo(<Map\|LayerGroup> map)`	`this`	将图层添加到指定的地图或图层组（layer group）。
`remove()`	`this`	从当前处于活动状态的地图中删除图层。
`removeFrom(<Map> map)`	`this`	从指定的地图中删除图层
`removeFrom(<LayerGroup> group)`	`this`	从指定的 `LayerGroup` 中删除图层。
`getPane(<String> name?)`	`HTMLElement`	返回代表地图上指定窗格（pane）的 `HTMLElement`。如果 `name` 被省略，则返回该层的窗格。
`getAttribution()`	`String`	由 `attribution 控件`使用，返回 attribution 选项。

继承自 Layer 图层的 Popup 方法

方法	返回值	说明
`bindPopup(<String\|HTMLElement\|Function\|Popup> content, <Popup options> options?)`	`this`	将弹出窗口绑定到传入的图层 `content` 并设置必要的事件侦听器。如果一个`Function`被传递，它将接收图层作为第一个参数，并应返回 `String` 或 `HTMLElement`。
`unbindPopup()`	`this`	移除之前用`bindPopup`绑定的弹出窗口。
`openPopup(<LatLng> latlng?)`	`this`	在指定的 `latlng` 处打开绑定的弹出窗口，如果没有指定 `latlng`，则在默认的锚点打开弹出窗口。
`closePopup()`	`this`	如果弹出窗口（popup）已打开，则关闭绑定到该层的弹出窗口。
`togglePopup()`	`this`	根据当前状态打开或关闭绑定到该层的弹出窗口。
`isPopupOpen()`	`boolean`	如果该层绑定的弹出窗口当前已打开，则返回 `true`。
`setPopupContent(<String\|HTMLElement\|Popup> content)`	`this`	设置绑定到该层的弹出窗口的内容。
`getPopup()`	`Popup`	返回绑定到该层的弹出窗口。

继承自 Layer 图层的 Tooltip 方法

方法	返回值	说明
`bindTooltip(<String\|HTMLElement\|Function\|Tooltip> content, <Tooltip options> options?)`	`this`	将工具提示（tooltip）绑定到传入的图层 `content` 并设置必要的事件侦听器。如果一个 `Function` 被传递，它将接收图层作为第一个参数，并应返回 `String` 或 `HTMLElement`。
`unbindTooltip()`	`this`	移除之前用 `bindTooltip` 绑定的工具提示（tooltip）。
`openTooltip(<LatLng> latlng?)`	`this`	在指定的 `latlng` 处打开绑定的工具提示（tooltip），如果没有指定 `latlng`，则在默认的锚点打开工具提示（tooltip）。
`closeTooltip()`	`this`	如果该图层处于打开状态，则关闭绑定到该图层的工具提示。
`toggleTooltip()`	`this`	根据当前状态打开或关闭绑定到该图层的工具提示（tooltip）。
`isTooltipOpen()`	`boolean`	如果该层绑定的工具提示（tooltip）当前已打开，则返回 `true`。
`setTooltipContent(<String\|HTMLElement\|Tooltip> content)`	`this`	设置绑定到该层的工具提示（tooltip）的内容。
`getTooltip()`	`Tooltip`	返回绑定到该层的工具提示（tooltip）。

继承自 Evented 的方法

方法	返回值	说明
`on(<String> type, <Function> fn, <Object> context?)`	`this`	为对象的特定事件类型添加一个监听函数（`fn`）。你可以选择性地指定监听器的上下文（这个关键字将指向的对象）。你也可以传递几个空格分隔的类型（例如，`'click dblclick'`）。
`on(<Object> eventMap)`	`this`	添加一组 type/listener，例如 `{click: onClick, mousemove: onMouseMove}`。
`off(<String> type, <Function> fn?, <Object> context?)`	`this`	移除一个先前添加的监听器函数。如果没有指定函数，它将从对象中删除该特定事件的所有监听器。请注意，如果您向 `on` 传递了一个自定义的上下文，您必须向 `off` 传递相同的上下文，以便删除监听器。
`off(<Object> eventMap)`	`this`	删除一组 type/listener
`off()`	`this`	移除该对象上所有事件的所有监听器。这包括隐含的附加事件。
`fire(<String> type, <Object> data?, <Boolean> propagate?)`	`this`	触发指定类型的事件。您可以选择提供一个数据对象——侦听器函数的第一个参数将包含其属性，事件可以选择性地传播到事件父级。
`listens(<String> type, <Boolean> propagate?)`	`Boolean`	如果一个特定的事件类型有任何监听器连接到它，则返回 `true`。验证可以选择性地被传播，如果父级有监听器连接到它，它将返回`true`。
`once(…)`	`this`	与`on(...)`的行为一样，不过监听器只会被触发一次后然后被删除。
`addEventParent(<Evented> obj)`	`this`	向父级 `Evented` 添加事件
`removeEventParent(<Evented> obj)`	`this`	删除之前向父级 `Evented` 添加的事件
`addEventListener(…)`	`this`	同 `on(…)`
`removeEventListener(…)`	`this`	同 `off(…)`
`clearAllEventListeners(…)`	`this`	同 `off()`
`addOneTimeEventListener(…)`	`this`	同 `once(…)`
`fireEvent(…)`	`this`	同 `fire(…)`
`hasEventListeners(…)`	`Boolean`	同 `listens(…)`

Properties 属性

Interaction handlers 交互处理程序

交互处理程序是一个标记（marker）实例的属性，允许你在运行时控制交互行为，启用或禁用某些功能，如拖动（见 Handler 方法）。示例：

marker.dragging.disable();

属性	类型	说明
`dragging`	`Handler`	标记（marker）拖动处理程序（通过鼠标和触摸），仅当标记 (marker) 在地图上时有效（否则设置 `marker.options.draggable`）。