Leaflet Map Popup—弹出层 - 北京炫码科技有限公司

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

使用示例

如果您只想将弹出窗口绑定到标记单击然后打开它，这真的很容易：

marker.bindPopup(popupContent).openPopup();

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

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

Factory Description

L.popup(<Popup options> options?, <Layer> source?) Instantiates a Popup object given an optional options object that describes its appearance and location and an optional source object that is used to tag the popup with a reference to the Layer to which it refers.
实例化一个 Popup 对象，给定一个描述其外观和位置的可选选项对象和一个可选源对象，该对象用于标记弹出窗口并引用它所引用的图层。

Factory	Description
`L.popup(<Popup options> options?, <Layer> source?)`	Instantiates a `Popup` object given an optional `options` object that describes its appearance and location and an optional `source` object that is used to tag the popup with a reference to the Layer to which it refers. 实例化一个 Popup 对象，给定一个描述其外观和位置的可选选项对象和一个可选源对象，该对象用于标记弹出窗口并引用它所引用的图层。

Option	Type	Default	Description
`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`	Max width of the popup, in pixels. 弹出窗口的最大宽度，以像素为单位。
`minWidth`	`Number`	`50`	Min width of the popup, in pixels. 弹出窗口的最小宽度，以像素为单位。
`maxHeight`	`Number`	`null`	If set, creates a scrollable container of the given height inside a popup if its content exceeds it. 如果设置，如果内容超过它，则在弹出窗口内创建一个给定高度的可滚动容器。
`autoPan`	`Boolean`	`true`	Set it to `false` if you don’t want the map to do panning animation to fit the opened popup. 如果您不希望地图进行平移动画以适应打开的弹出窗口，请将其设置为 false。
`autoPanPaddingTopLeft`	`Point`	`null`	The margin between the popup and the top left corner of the map view after autopanning was performed. 执行自动平移后，弹出窗口与地图视图左上角之间的边距。
`autoPanPaddingBottomRight`	`Point`	`null`	The margin between the popup and the bottom right corner of the map view after autopanning was performed. 执行自动平移后，弹出窗口与地图视图右下角之间的边距。
`autoPanPadding`	`Point`	`Point(5, 5)`	Equivalent of setting both top left and bottom right autopan padding to the same value. 相当于将左上角和右下角的自动平移填充设置为相同的值。
`keepInView`	`Boolean`	`false`	Set it to `true` if you want to prevent users from panning the popup off of the screen while it is open. 如果您想阻止用户在弹出窗口打开时将其从屏幕上移开，请将其设置为 true。
`closeButton`	`Boolean`	`true`	Controls the presence of a close button in the popup. 控制弹出窗口中是否存在关闭按钮。
`autoClose`	`Boolean`	`true`	Set it to `false` if you want to override the default behavior of the popup closing when another popup is opened. 如果您想在打开另一个弹出窗口时覆盖弹出窗口关闭的默认行为，请将其设置为 false。
`closeOnEscapeKey`	`Boolean`	`true`	Set it to `false` if you want to override the default behavior of the ESC key for closing of the popup. 如果您想覆盖 ESC 键关闭弹出窗口的默认行为，请将其设置为 false。
`closeOnClick`	`Boolean`	`*`	Set it if you want to override the default behavior of the popup closing when user clicks on the map. Defaults to the map’s `closePopupOnClick` option. 如果您想在用户单击地图时覆盖弹出关闭的默认行为，请设置它。默认为地图的 closePopupOnClick 选项。
`className`	`String`	`''`	A custom CSS class name to assign to the popup. 要分配给弹出窗口的自定义 CSS 类名称。

▶ Options inherited from DivOverlay 从 DivOverlay 继承的选项

Option	Type	Default	Description
`interactive`	`Boolean`	`false`	If true, the popup/tooltip will listen to the mouse events. 如果为真，弹出/工具提示将监听鼠标事件。

▶ Options inherited from Interactive layer

Option	Type	Default	Description
`bubblingMouseEvents`	`Boolean`	`true`	When `true`, a mouse event on this layer will trigger the same event on the map (unless `L.DomEvent.stopPropagation` is used). 如果为 true，此图层上的鼠标事件将触发地图上的相同事件（除非使用 L.DomEvent.stopPropagation）。

▶ Options inherited from Layer

Option	Type	Default	Description
`attribution`	`String`	`null`	String to be shown in the attribution control, e.g. “© OpenStreetMap contributors”. It describes the layer data and is often a legal obligation towards copyright holders and tile providers. 要在归因控件中显示的字符串，例如“© OpenStreetMap 贡献者”。它描述了图层数据，并且通常是对版权所有者和切片提供者的法律义务。

Events 事件

▶ DivOverlay events inherited from DivOverlay 从 DivOverlay 继承的 DivOverlay 事件

Event	Data	Description
`contentupdate`	`Event`	Fired when the content of the overlay is updated 当覆盖的内容更新时触发

▶ Mouse events inherited from Interactive layer

Event	Data	Description
`click`	`MouseEvent`	Fired when the user clicks (or taps) the layer. 当用户单击（或点击）图层时触发。
`dblclick`	`MouseEvent`	Fired when the user double-clicks (or double-taps) the layer. 当用户双击（或双击）图层时触发。
`mousedown`	`MouseEvent`	Fired when the user pushes the mouse button on the layer. 当用户在图层上按下鼠标按钮时触发。
`mouseup`	`MouseEvent`	Fired when the user releases the mouse button pushed on the layer. 当用户释放在图层上按下的鼠标按钮时触发。
`mouseover`	`MouseEvent`	Fired when the mouse enters the layer. 当鼠标进入图层时触发。
`mouseout`	`MouseEvent`	Fired when the mouse leaves the layer. 当鼠标离开图层时触发。
`contextmenu`	`MouseEvent`	Fired when the user right-clicks on the layer, prevents default browser context menu from showing if there are listeners on this event. Also fired on mobile when the user holds a single touch for a second (also called long press). 当用户右键单击图层时触发，防止默认浏览器上下文菜单显示此事件是否有侦听器。当用户按住单次触摸一秒钟（也称为长按）时，也会在移动设备上触发。

▶ Events inherited from Layer 从图层继承的事件

Event	Data	Description
`add`	`Event`	Fired after the layer is added to a map 在图层添加到地图后触发
`remove`	`Event`	Fired after the layer is removed from a map 从地图中移除图层后触发

▶ Popup events inherited from Layer

Event	Data	Description
`popupopen`	`PopupEvent`	Fired when a popup bound to this layer is opened 打开绑定到该层的弹出窗口时触发
`popupclose`	`PopupEvent`	Fired when a popup bound to this layer is closed 当绑定到该层的弹出窗口关闭时触发

▶ Tooltip events inherited from Layer

Event	Data	Description
`tooltipopen`	`TooltipEvent`	Fired when a tooltip bound to this layer is opened. 打开绑定到此图层的工具提示时触发。
`tooltipclose`	`TooltipEvent`	Fired when a tooltip bound to this layer is closed. 当绑定到该层的工具提示关闭时触发。

Method	Returns	Description
`openOn(<Map> map)`	`this`	Alternative to `map.openPopup(popup)`. Adds the popup to the map and closes the previous one. map.openPopup(popup) 的替代方案。将弹出窗口添加到地图并关闭前一个。

▶ Methods inherited from DivOverlay

Method	Returns	Description
`close()`	`this`	Closes the overlay. Alternative to `map.closePopup(popup)`/`.closeTooltip(tooltip)` and `layer.closePopup()`/`.closeTooltip()`. 关闭覆盖。替代 map.closePopup(popup)/.closeTooltip(tooltip) 和 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()`. 根据当前状态打开或关闭绑定到图层的叠加层。仅对于绑定到图层的叠加层，可以省略参数。替代 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. 设置叠加层的 HTML 内容。如果传递了一个函数，则源层将传递给该函数。该函数应返回要在叠加层中使用的字符串或 HTMLElement。
`getElement()`	`String\|HTMLElement`	Returns the HTML container of the overlay. 返回叠加层的 HTML 容器。
`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. 当叠加层在地图上可见时返回 true。
`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). 将此叠加层置于其他叠加层的后面（在同一地图窗格中）。

▶ Methods inherited from Layer 从图层继承的方法

Method	Returns	Description
`addTo(<Map\|LayerGroup> map)`	`this`	Adds the layer to the given map or layer group. 将图层添加到给定的地图或图层组。
`remove()`	`this`	Removes the layer from the map it is currently active on. 从当前处于活动状态的地图中移除图层。
`removeFrom(<Map> map)`	`this`	Removes the layer from the given map 从给定地图中删除图层
`removeFrom(<LayerGroup> group)`	`this`	Removes the layer from the given `LayerGroup` 从给定的图层组中移除图层
`getPane(<String> name?)`	`HTMLElement`	Returns the `HTMLElement` representing the named pane on the map. If `name` is omitted, returns the pane for this layer. 返回表示地图上命名窗格的 HTMLElement。如果省略名称，则返回此图层的窗格。
`getAttribution()`	`String`	Used by the `attribution control`, returns the attribution option. 由归因控制使用，返回归因选项。

▶ Popup methods inherited from Layer 从图层继承的弹出方法

Method	Returns	Description
`bindPopup(<String\|HTMLElement\|Function\|Popup> content, <Popup options> options?)`	`this`	Binds a popup to the layer with the passed `content` and sets up the necessary event listeners. If a `Function` is passed it will receive the layer as the first argument and should return a `String` or `HTMLElement`. 使用传递的内容将弹出窗口绑定到图层并设置必要的事件侦听器。如果传递了一个函数，它将接收图层作为第一个参数，并应返回一个字符串或 HTMLElement。
`unbindPopup()`	`this`	Removes the popup previously bound with `bindPopup`. 移除之前与 bindPopup 绑定的弹出窗口。
`openPopup(<LatLng> latlng?)`	`this`	Opens the bound popup at the specified `latlng` or at the default popup anchor if no `latlng` is passed. 如果未传递任何 latlng，则在指定的 latlng 或默认弹出窗口锚点处打开绑定弹出窗口。
`closePopup()`	`this`	Closes the popup bound to this layer if it is open. 如果该层打开，则关闭绑定到该层的弹出窗口。
`togglePopup()`	`this`	Opens or closes the popup bound to this layer depending on its current state. 根据当前状态打开或关闭绑定到该层的弹出窗口。
`isPopupOpen()`	`boolean`	Returns `true` if the popup bound to this layer is currently open. 如果绑定到此图层的弹出窗口当前打开，则返回 true。
`setPopupContent(<String\|HTMLElement\|Popup> content)`	`this`	Sets the content of the popup bound to this layer. 设置绑定到该层的弹出窗口的内容。
`getPopup()`	`Popup`	Returns the popup bound to this layer. 返回绑定到该层的弹出窗口。

▶ Tooltip methods inherited from Layer

Method	Returns	Description
`bindTooltip(<String\|HTMLElement\|Function\|Tooltip> content, <Tooltip options> options?)`	`this`	Binds a tooltip to the layer with the passed `content` and sets up the necessary event listeners. If a `Function` is passed it will receive the layer as the first argument and should return a `String` or `HTMLElement`. 使用传递的内容将工具提示绑定到图层并设置必要的事件侦听器。如果传递了一个函数，它将接收图层作为第一个参数，并应返回一个字符串或 HTMLElement。
`unbindTooltip()`	`this`	Removes the tooltip previously bound with `bindTooltip`. 移除之前与 bindTooltip 绑定的工具提示。
`openTooltip(<LatLng> latlng?)`	`this`	Opens the bound tooltip at the specified `latlng` or at the default tooltip anchor if no `latlng` is passed. 如果未传递任何 latlng，则在指定的 latlng 或默认的工具提示锚点处打开绑定的工具提示。
`closeTooltip()`	`this`	Closes the tooltip bound to this layer if it is open. 如果此图层打开，则关闭绑定到此图层的工具提示。
`toggleTooltip()`	`this`	Opens or closes the tooltip bound to this layer depending on its current state. 根据其当前状态打开或关闭绑定到此图层的工具提示。
`isTooltipOpen()`	`boolean`	Returns `true` if the tooltip bound to this layer is currently open. 如果绑定到此图层的工具提示当前打开，则返回 true。
`setTooltipContent(<String\|HTMLElement\|Tooltip> content)`	`this`	Sets the content of the tooltip bound to this layer. 设置绑定到该图层的工具提示的内容。
`getTooltip()`	`Tooltip`	Returns the tooltip bound to this layer. 返回绑定到该图层的工具提示。

▶ Methods inherited from Evented 继承自 Evented 的方法

Method	Returns	Description
`on(<String> type, <Function> fn, <Object> context?)`	`this`	Adds a listener function (`fn`) to a particular event type of the object. You can optionally specify the context of the listener (object the this keyword will point to). You can also pass several space-separated types (e.g. `'click dblclick'`). 将侦听器函数 (fn) 添加到对象的特定事件类型。您可以选择指定侦听器的上下文（this 关键字将指向的对象）。您还可以传递几种以空格分隔的类型（例如“click dblclick”）。
`on(<Object> eventMap)`	`this`	Adds a set of type/listener pairs, e.g. `{click: onClick, mousemove: onMouseMove}` 添加一组类型/侦听器对，例如{点击：onClick，鼠标移动：onMouseMove}
`off(<String> type, <Function> fn?, <Object> context?)`	`this`	Removes a previously added listener function. If no function is specified, it will remove all the listeners of that particular event from the object. Note that if you passed a custom context to `on`, you must pass the same context to `off` in order to remove the listener. 删除以前添加的侦听器函数。如果未指定函数，它将从对象中删除该特定事件的所有侦听器。请注意，如果您将自定义上下文传递给 on，则必须将相同的上下文传递给 off 才能移除侦听器。
`off(<Object> eventMap)`	`this`	Removes a set of type/listener pairs. 删除一组类型/侦听器对。
`off()`	`this`	Removes all listeners to all events on the object. This includes implicitly attached events. 删除对象上所有事件的所有侦听器。这包括隐式附加事件。
`fire(<String> type, <Object> data?, <Boolean> propagate?)`	`this`	Fires an event of the specified type. You can optionally provide a data object — the first argument of the listener function will contain its properties. The event can optionally be propagated to event parents. 触发指定类型的事件。您可以选择提供一个数据对象——侦听器函数的第一个参数将包含其属性。可以选择将事件传播到事件父级。
`listens(<String> type, <Boolean> propagate?)`	`Boolean`	Returns `true` if a particular event type has any listeners attached to it. The verification can optionally be propagated, it will return `true` if parents have the listener attached to it. 如果特定事件类型附加了任何侦听器，则返回 true。验证可以选择传播，如果父母有监听器附加到它，它将返回 true。
`once(…)`	`this`	Behaves as `on(…)`, except the listener will only get fired once and then removed. 表现为 on(…)，除了监听器只会被触发一次然后被移除。
`addEventParent(<Evented> obj)`	`this`	Adds an event parent – an `Evented` that will receive propagated events 添加事件父级 – 将接收传播事件的事件
`removeEventParent(<Evented> obj)`	`this`	Removes an event parent, so it will stop receiving propagated events 删除事件父级，因此它将停止接收传播的事件
`addEventListener(…)`	`this`	Alias to `on(…)` on(…) 的别名
`removeEventListener(…)`	`this`	Alias to `off(…)`
`clearAllEventListeners(…)`	`this`	Alias to `off()`
`addOneTimeEventListener(…)`	`this`	Alias to `once(…)`
`fireEvent(…)`	`this`	Alias to `fire(…)`
`hasEventListeners(…)`	`Boolean`	Alias to `listens(…)`

0 0 投票数

文章评分

Creation 创建

Options 选项

Events 事件

Methods 方法