Leaflet API - Popup 弹出窗口中文文档

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

当前位置：

麻辣GIS » GIS手册 » Leaflet中文API手册（V1.9） » Leaflet API - Popup 弹出窗口中文文档

本文介绍下 Leaflet 中 Popup 弹出窗口 API的详细使用说明。

Popup 弹出窗口 API 调用方法

用于在地图的某些位置打开弹出窗口。使用 Map.openPopup 打开弹出窗口，同时确保一次只打开一个弹出窗口（推荐使用），或者使用 Map.addLayer 打开任意多个。

如果您只想将弹出窗口（popup）绑定到标记（marker）单击然后打开它，这其实很简单：

marker.bindPopup(popupContent).openPopup();

像折线（polylines）这样的路径叠加也有一个 bindPopup 方法。这是在地图上打开弹出窗口的更复杂的方法：

var popup = L.popup()
    .setLatLng(latlng)
    .setContent('<p>Hello world!<br />This is a nice popup.</p>')
    .openOn(map);

构造函数	说明
`L.popup(<Popup options> options?, <Layer> source?)`	实例化一个 `Popup` 对象，给定一个可选的 `options` 对象，描述其外观和位置，以及一个可选的 `source` 对象，用它所指向的图层的引用来标记弹出窗口（popup）。

选项	类型	默认	描述
`pane`	`String`	`'popupPane'`	`Map pane` where the popup will be added.
`offset`	`Point`	`Point(0, 7)`	The offset of the popup position.
`maxWidth`	`Number`	`300`	Popup 的最大宽度，以像素为单位。
`minWidth`	`Number`	`50`	Popup 的最小宽度，以像素为单位。
`maxHeight`	`Number`	`null`	设置后，如果其内容超过它，则在 Popup 内创建给定高度的可滚动容器。
`autoPan`	`Boolean`	`true`	如果你不想让地图做平移动画，把它设置为 `false`，以适应打开的 Popup。
`autoPanPaddingTopLeft`	`Point`	`null`	自动平移后，Popup 与地图左上角之间的边距。
`autoPanPaddingBottomRight`	`Point`	`null`	自动平移后，Popup 与地图右下角之间的边距。
`autoPanPadding`	`Point`	`Point(5, 5)`	相当于将左上角和右下角自动平移填充设置为相同的值。
`keepInView`	`Boolean`	`false`	如果您想防止用户在弹出窗口（popup）打开时将其移出屏幕，请将其设置为`true`。
`closeButton`	`Boolean`	`true`	控制弹出窗口中是否有关闭按钮。
`autoClose`	`Boolean`	`true`	如果您想重写在打开另一个弹出框时关闭弹出框的默认行为,请将其设置为 `false`。
`closeOnEscapeKey`	`Boolean`	`true`	如果你想覆盖 ESC 键关闭弹出窗口 (popup) 的默认行为，将其设置为 `false`。
`closeOnClick`	`Boolean`	`*`	如果您想覆盖用户点击地图时关闭弹出窗口的默认行为，请设置它。默认为地图 `closePopupOnClick` 选项。
`className`	`String`	`''`	为弹出窗口（popup）设置自定义 CSS 类名称。

继承自 DivOverlay 的选项

选项	类型	默认	描述
`interactive`	`Boolean`	`false`	如果为 true，popup/tooltip 将监听鼠标事件。

继承自 Interactive layer 的选项

选项	类型	默认	说明
`bubblingMouseEvents`	`Boolean`	`true`	当为 `true`时，鼠标事件将在地图上触发相同的事件 (除非使用 `L.DomEvent.stopPropagation` )。

继承自 Layer 图层的选项

选项	类型	默认值	说明
`attribution`	`String`	`null`	归属控制中要显示的字符串，例如 "© OpenStreetMap 贡献者"。它描述了图层数据，通常是对版权所有者和瓦片提供者的法律义务。

Events 事件

继承自 DivOverlay 的 DivOverlay 事件

事件	数据	说明
`contentupdate`	`Event`	当 overlay 的内容被更新时触发。

继承自 Interactive layer（交互图层）的鼠标事件

事件	数据	说明
`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 关闭时触发。

方法	返回值	说明
`openOn(<Map> map)`	`this`	将弹出窗口添加到地图上，并关闭之前的窗口。与 `map.openPopup(popup)` 相同。

继承自 DivOverlay 的方法

方法	返回值	说明
`close()`	`this`	Closes the overlay. Alternative to `map.closePopup(popup)`/`.closeTooltip(tooltip)` and `layer.closePopup()`/`.closeTooltip()`.
`toggle(<Layer> layer?)`	`this`	Opens or closes the overlay bound to layer depending on its current state. Argument may be omitted only for overlay bound to layer. Alternative to `layer.togglePopup()`/`.toggleTooltip()`.
`getLatLng()`	`LatLng`	Returns the geographical point of the overlay.
`setLatLng(<LatLng> latlng)`	`this`	Sets the geographical point where the overlay will open.
`getContent()`	`String\|HTMLElement`	Returns the content of the overlay.
`setContent(<String\|HTMLElement\|Function> htmlContent)`	`this`	Sets the HTML content of the overlay. If a function is passed the source layer will be passed to the function. The function should return a `String` or `HTMLElement` to be used in the overlay.
`getElement()`	`String\|HTMLElement`	Returns the HTML container of the overlay.
`update()`	`null`	Updates the overlay content, layout and position. Useful for updating the overlay after something inside changed, e.g. image loaded.
`isOpen()`	`Boolean`	Returns `true` when the overlay is visible on the map.
`bringToFront()`	`this`	Brings this overlay in front of other overlays (in the same map pane).
`bringToBack()`	`this`	Brings this overlay to the back of other overlays (in the same map pane).

继承自 Layer 图层的方法

方法	返回值	说明
`addTo(<Map\|LayerGroup> map)`	`this`	将图层添加到指定的地图或图层组（LayerGroup）。
`remove()`	`this`	从当前处于活动状态的地图中删除图层。
`removeFrom(<Map> map)`	`this`	从指定的地图中删除图层
`removeFrom(<LayerGroup> group)`	`this`	从指定的`LayerGroup`中删除该图层。
`getPane(<String> name?)`	`HTMLElement`	返回代表地图上指定窗格的 `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`，则在默认的位置打开弹窗（popup）。
`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`	根据当前状态打开或关闭绑定到该图层的工具提示。
`isTooltipOpen()`	`boolean`	如果该层绑定的工具提示当前已打开，则返回 `true`。
`setTooltipContent(<String\|HTMLElement\|Tooltip> content)`	`this`	设置绑定到该层的工具提示的内容。
`getTooltip()`	`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(…)`