Skip to content

Documentation / @geoverse/core-libre / InfoWindow

Class: InfoWindow

Defined in: packages/core-libre/src/map/infoWindow.ts:37

信息弹窗,继承自 maplibregl.Popup

相对原生 Popup 的增强:内容支持 HTML 字符串/元素 id/DOM 元素; 提供与 core 对齐的 open / close 语义(位置入参为 WGS-84 经纬度)。 Popup 自身已派发 'open' / 'close' 事件。

坐标:使用者给的 position 恒为 WGS-84。挂到 GMap 时按其当前 datum 把位置 forward 到地图空间(国内底图无偏移);挂到原生 Map 则按 WGS-84 处理。

Extends

  • Popup

Constructors

Constructor

ts
new InfoWindow(opts?): InfoWindow;

Defined in: packages/core-libre/src/map/infoWindow.ts:47

Parameters

opts?

InfoWindowOptions = {}

Returns

InfoWindow

Overrides

ts
Popup.constructor

Properties

_closeButton

ts
_closeButton: HTMLButtonElement;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:13496

Inherited from

ts
Popup._closeButton

_container

ts
_container: HTMLElement;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:13495

Inherited from

ts
Popup._container

_content

ts
_content: HTMLElement;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:13494

Inherited from

ts
Popup._content

_eventedParent

ts
_eventedParent: Evented;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:827

Inherited from

ts
Popup._eventedParent

_eventedParentData

ts
_eventedParentData: any;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:828

Inherited from

ts
Popup._eventedParentData

_flatPos

ts
_flatPos: Point;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:13501

Inherited from

ts
Popup._flatPos

_listeners

ts
_listeners: Listeners;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:825

Inherited from

ts
Popup._listeners

_lngLat

ts
_lngLat: LngLat;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:13498

Inherited from

ts
Popup._lngLat

_map

ts
_map: Map$1;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:13492

Inherited from

ts
Popup._map

_onClose

ts
_onClose: () => void;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:13720

Returns

void

Inherited from

ts
Popup._onClose

_oneTimeListeners

ts
_oneTimeListeners: Listeners;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:826

Inherited from

ts
Popup._oneTimeListeners

_pos

ts
_pos: Point;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:13500

Inherited from

ts
Popup._pos

_tip

ts
_tip: HTMLElement;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:13497

Inherited from

ts
Popup._tip

_trackPointer

ts
_trackPointer: boolean;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:13499

Inherited from

ts
Popup._trackPointer

_update

ts
_update: (event?) => void;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:13718

Parameters

event?

MapMouseEvent | MapLibreEvent<unknown>

Returns

void

Inherited from

ts
Popup._update

_updateOpacity

ts
_updateOpacity: () => void;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:13526

Add opacity to popup if in globe projection and location is behind view

Returns

void

Inherited from

ts
Popup._updateOpacity

options

ts
options: PopupOptions;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:13493

Inherited from

ts
Popup.options

remove

ts
remove: () => this;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:13540

Removes the popup from the map it has been added to.

Returns

this

Example

ts
let popup = new Popup().addTo(map);
popup.remove();

Inherited from

ts
Popup.remove

Methods

_createCloseButton()

ts
_createCloseButton(): void;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:13717

Returns

void

Inherited from

ts
Popup._createCloseButton

_focusFirstElement()

ts
_focusFirstElement(): void;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:13719

Returns

void

Inherited from

ts
Popup._focusFirstElement

addClassName()

ts
addClassName(className): this;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:13662

Adds a CSS class to the popup container element.

Parameters

className

string

Non-empty string with CSS class name to add to popup container

Returns

this

Example

ts
let popup = new Popup()
popup.addClassName('some-class')

Inherited from

ts
Popup.addClassName

addTo()

ts
addTo(map): this;

Defined in: packages/core-libre/src/map/infoWindow.ts:68

挂载到地图;记录其 datum、订阅 datum 变更、并按之重新投影已有位置

Parameters

map

Map$1

Returns

this

Overrides

ts
Popup.addTo

close()

ts
close(): this;

Defined in: packages/core-libre/src/map/infoWindow.ts:95

关闭弹窗(从地图移除,Popup 会派发 'close')

Returns

this


fire()

ts
fire(event, properties?): this;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:855

Parameters

event

string | Event$1

properties?

any

Returns

this

Inherited from

ts
Popup.fire

getElement()

ts
getElement(): HTMLElement;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:13583

Returns the Popup's HTML element.

Returns

HTMLElement

element

Example

Change the Popup element's font size

ts
let popup = new Popup()
  .setLngLat([-96, 37.8])
  .setHTML("<p>Hello World!</p>")
  .addTo(map);
let popupElem = popup.getElement();
popupElem.style.fontSize = "25px";

Inherited from

ts
Popup.getElement

getLngLat()

ts
getLngLat(): LngLat;

Defined in: packages/core-libre/src/map/infoWindow.ts:63

获取位置(WGS-84)

Returns

LngLat

Overrides

ts
Popup.getLngLat

getMaxWidth()

ts
getMaxWidth(): string;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:13627

Returns the popup's maximum width.

Returns

string

The maximum width of the popup.

Inherited from

ts
Popup.getMaxWidth

isOpen()

ts
isOpen(): boolean;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:13530

Returns

boolean

true if the popup is open, false if it is closed.

Inherited from

ts
Popup.isOpen

listens()

ts
listens(type): boolean;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:862

Returns a true if this instance of Evented or any forwardeed instances of Evented have a listener for the specified type.

Parameters

type

string

The event type

Returns

boolean

true if there is at least one registered listener for specified event type, false otherwise

Inherited from

ts
Popup.listens

off()

ts
off(type, listener): this;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:844

Removes a previously registered event listener.

Parameters

type

string

The event type to remove listeners for.

listener

Listener

The listener function to remove.

Returns

this

Inherited from

ts
Popup.off

on()

ts
on(type, listener): Subscription;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:837

Adds a listener to a specified event type.

Parameters

type

string

The event type to add a listen for.

listener

Listener

The function to be called when the event is fired. The listener function is called with the data object passed to fire, extended with target and type properties.

Returns

Subscription

Inherited from

ts
Popup.on

once()

ts
once(type, listener?): Promise<any> | InfoWindow;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:854

Adds a listener that will be called only once to a specified event type.

The listener will be called first time the event fires after the listener is registered.

Parameters

type

string

The event type to listen for.

listener?

Listener

The function to be called when the event is fired the first time.

Returns

Promise<any> | InfoWindow

this or a promise if a listener is not provided

Inherited from

ts
Popup.once

open()

ts
open(map, lngLat?): this;

Defined in: packages/core-libre/src/map/infoWindow.ts:88

打开弹窗;可选传入新的经纬度位置

Parameters

map

Map$1

lngLat?

LngLatLike

Returns

this


removeClassName()

ts
removeClassName(className): this;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:13674

Removes a CSS class from the popup container element.

Parameters

className

string

Non-empty string with CSS class name to remove from popup container

Returns

this

Example

ts
let popup = new Popup()
popup.removeClassName('some-class')

Inherited from

ts
Popup.removeClassName

setContent()

ts
setContent(content): this;

Defined in: packages/core-libre/src/map/infoWindow.ts:101

设置内容(HTML 字符串 / 元素 id / DOM 元素)

Parameters

content

string | HTMLElement

Returns

this


setDOMContent()

ts
setDOMContent(htmlNode): this;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:13650

Sets the popup's content to the element provided as a DOM node.

Parameters

htmlNode

Node

A DOM node to be used as content for the popup.

Returns

this

Example

Create an element with the popup content

ts
let div = document.createElement('div');
div.innerHTML = 'Hello, world!';
let popup = new Popup()
  .setLngLat(e.lngLat)
  .setDOMContent(div)
  .addTo(map);

Inherited from

ts
Popup.setDOMContent

setEventedParent()

ts
setEventedParent(parent?, data?): this;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:866

Bubble all events fired by this instance of Evented to this parent instance of Evented.

Parameters

parent?

Evented | null

data?

any

Returns

this

Inherited from

ts
Popup.setEventedParent

setHTML()

ts
setHTML(html): this;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:13621

Sets the popup's content to the HTML provided as a string.

This method does not perform HTML filtering or sanitization, and must be used only with trusted content. Consider Popup.setText if the content is an untrusted text string.

Parameters

html

string

A string representing HTML content for the popup.

Returns

this

Example

ts
let popup = new Popup()
  .setLngLat(e.lngLat)
  .setHTML("<h1>Hello World!</h1>")
  .addTo(map);

See

Inherited from

ts
Popup.setHTML

setLngLat()

ts
setLngLat(lngLat): this;

Defined in: packages/core-libre/src/map/infoWindow.ts:56

设置位置(WGS-84);按当前挂载地图 datum 投影到地图空间

Parameters

lngLat

LngLatLike

Returns

this

Overrides

ts
Popup.setLngLat

setMaxWidth()

ts
setMaxWidth(maxWidth): this;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:13634

Sets the popup's maximum width. This is setting the CSS property max-width. Available values can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/max-width

Parameters

maxWidth

string

A string representing the value for the maximum width.

Returns

this

Inherited from

ts
Popup.setMaxWidth

setOffset()

ts
setOffset(offset?): this;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:13680

Sets the popup's offset.

Parameters

offset?

Offset

Sets the popup's offset.

Returns

this

Inherited from

ts
Popup.setOffset

setPadding()

ts
setPadding(padding?): void;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:13716

Sets the popup's padding constraints for positioning.

Parameters

padding?

PaddingOptions

The padding to apply as a PaddingOptions object.

Returns

void

Example

ts
popup.setPadding({ top: 10, right: 20, bottom: 30, left: 40 });

Inherited from

ts
Popup.setPadding

setSubpixelPositioning()

ts
setSubpixelPositioning(value): void;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:13706

Set the option to allow subpixel positioning of the popup by passing a boolean

Parameters

value

boolean

When boolean is true, subpixel positioning is enabled for the popup.

Returns

void

Example

ts
let popup = new Popup()
popup.setSubpixelPositioning(true);

Inherited from

ts
Popup.setSubpixelPositioning

setText()

ts
setText(text): this;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:13600

Sets the popup's content to a string of text.

This function creates a Text node in the DOM, so it cannot insert raw HTML. Use this method for security against XSS if the popup content is user-provided.

Parameters

text

string

Textual content for the popup.

Returns

this

Example

ts
let popup = new Popup()
  .setLngLat(e.lngLat)
  .setText('Hello, world!')
  .addTo(map);

Inherited from

ts
Popup.setText

toggleClassName()

ts
toggleClassName(className): boolean | undefined;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:13694

Add or remove the given CSS class on the popup container, depending on whether the container currently has that class.

Parameters

className

string

Non-empty string with CSS class name to add/remove

Returns

boolean | undefined

if the class was removed return false, if class was added, then return true, undefined if there is no container

Example

ts
let popup = new Popup()
popup.toggleClassName('toggleClass')

Inherited from

ts
Popup.toggleClassName

trackPointer()

ts
trackPointer(): this;

Defined in: node_modules/.pnpm/maplibre-gl@5.24.0/node_modules/maplibre-gl/dist/maplibre-gl.d.ts:13568

Tracks the popup anchor to the cursor position on screens with a pointer device (it will be hidden on touchscreens). Replaces the setLngLat behavior. For most use cases, set closeOnClick and closeButton to false.

Returns

this

Example

ts
let popup = new Popup({ closeOnClick: false, closeButton: false })
  .setHTML("<h1>Hello World!</h1>")
  .trackPointer()
  .addTo(map);

Inherited from

ts
Popup.trackPointer