Popup

定义于: src/ui/popup.ts:30

Popup是一个绑定到特定地理位置的小弹出窗口，当用户点击地图或位置标记时显示；一个Popup可以通过closeButton或按下Esc键关闭；要使弹出窗口定位准确，使用closeOnClick: false；

示例

let popup = new Popup()
  .setLngLat([-122.42, 37.779])
  .setHTML('<h1>Hello World!</h1>')
  .addTo(map);

参见

在地图上添加弹出窗口 在悬停时显示弹出窗口 将弹出窗口附加到标记实例

事件

事件 当弹出窗口关闭时，将触发类型为Event的close事件；

事件 当弹出窗口打开时，将触发类型为Event的open事件；

继承

• Evented

构造函数

构造函数

new Popup(options?: PopupOptions): Popup

定义于: src/ui/popup.ts:76

参数

返回

Popup

覆盖

Evented.constructor

方法

addClassName()

addClassName(className: string): void

定义于: src/ui/popup.ts:672

向弹出窗口容器元素添加CSS类；

参数

返回

void

示例

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

addTo()

addTo(map: Map): this

定义于: src/ui/popup.ts:382

将弹出窗口添加到地图上；

参数

返回

this

示例

创建一个新弹出窗口，并将其添加到地图上

new Popup()
  .setLngLat([0, 0])
  .setHTML("<h1>Hello World!</h1>")
  .addTo(map);

getElement()

getElement(): HTMLElement

定义于: src/ui/popup.ts:661

返回弹出窗口的HTML元素；

返回

HTMLElement

弹出窗口的HTML元素

示例

const popup = new Popup()
  .setLngLat([0, 0])
  .setHTML("<h1>Hello World!</h1>")
  .addTo(map);

console.log(popup.getElement()); // 弹出窗口的HTMLDivElement

getLngLat()

getLngLat(): LngLat

定义于: src/ui/popup.ts:559

返回弹出窗口的地理位置；

返回

LngLat

弹出窗口的地理位置

示例

const popup = new Popup()
  .setLngLat([0, 0])
  .setHTML("<h1>Hello World!</h1>")
  .addTo(map);

const lngLat = popup.getLngLat();

getMaxWidth()

getMaxWidth(): string

定义于: src/ui/popup.ts:590

返回弹出窗口的最大宽度；

返回

string

弹出窗口的最大宽度（CSS字符串）

示例

const popup = new Popup()
  .setLngLat([0, 0])
  .setHTML("<h1>Hello World!</h1>")
  .setMaxWidth("300px")
  .addTo(map);

const maxWidth = popup.getMaxWidth();
console.log(maxWidth); // = "300px"

isOpen()

isOpen(): boolean

定义于: src/ui/popup.ts:483

如果弹出窗口当前显示在地图上，则返回true；

返回

boolean

如果弹出窗口当前显示在地图上，则返回true

示例

const popup = new Popup()
  .setLngLat([0, 0])
  .setHTML("<h1>Hello World!</h1>")
  .addTo(map);

console.log(popup.isOpen()); // true

listens()

listens(type: string): boolean

定义于: src/util/evented.ts:165

如果这个Evented实例或任何转发的Evented实例对指定类型有监听器，则返回true；

参数

返回

boolean

如果指定的事件类型至少有一个注册的监听器，则为true，否则为false；

继承自

Evented.listens

off()

off(type: string, listener: Listener): Popup

定义于: src/util/evented.ts:90

移除先前注册的事件监听器；

参数

返回

Popup

继承自

Evented.off

on()

on(type: string, listener: Listener): Subscription

定义于: src/util/evented.ts:73

为指定的事件类型添加监听器；

参数

返回

Subscription

继承自

Evented.on

once()

once(type: string, listener?: Listener): Promise<any> | Popup

定义于: src/util/evented.ts:106

添加一个只会被调用一次的监听器到指定的事件类型；

在注册监听器后，首次触发事件时将调用该监听器；

参数

返回

Promise<any> | Popup

如果未提供监听器，则返回this或Promise；

继承自

Evented.once

remove()

remove(): this

定义于: src/ui/popup.ts:445

从地图上移除弹出窗口；当弹出窗口通过关闭按钮或按Esc键关闭时，该方法将自动调用；如果您希望以编程方式关闭弹出窗口并触发close事件，请使用此方法；

返回

this

示例

const popup = new Popup()
  .setLngLat([0, 0])
  .setHTML("<h1>Hello World!</h1>")
  .addTo(map);

popup.remove();

removeClassName()

removeClassName(className: string): void

定义于: src/ui/popup.ts:683

从弹出窗口容器元素中移除CSS类；

参数

返回

void

示例

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

setDOMContent()

setDOMContent(htmlNode: Node): this

定义于: src/ui/popup.ts:338

在弹出窗口中设置HTML元素作为内容；这个函数创建一个弹出窗口，其内容由给定的DOM节点组成；

参数

返回

this

示例

// 创建一个弹出窗口
const popup = new Popup()
 .setLngLat(e.lngLat)
 .addTo(map);

// 创建一个DOM节点作为内容
const div = window.document.createElement('div');
div.innerHTML = 'Hello, world!';
div.style.color = 'blue';

// 添加到弹出窗口
popup.setDOMContent(div);

setEventedParent()

setEventedParent(parent?: Evented, data?: any): Popup

定义于: src/util/evented.ts:176

将此Evented实例触发的所有事件冒泡到此Evented的父实例；

参数

返回

Popup

继承自

Evented.setEventedParent

setHTML()

setHTML(html: string): this

定义于: src/ui/popup.ts:317

在弹出窗口中设置HTML内容；这个函数创建一个弹出窗口，其内容由给定的HTML字符串组成；对于关注安全的应用程序，您不应该用用户提供的内容调用此函数；

参数

返回

this

示例

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

setLngLat()

setLngLat(lnglat: LngLatLike): this

定义于: src/ui/popup.ts:263

将弹出窗口设置在地图上的特定地理位置；

参数

返回

this

示例

let popup = new Popup()
  .setLngLat([-122.4, 37.8])
  .setHTML("<h1>Hello World!</h1>")
  .addTo(map);

setMaxWidth()

setMaxWidth(maxWidth: string): this

定义于: src/ui/popup.ts:571

设置弹出窗口的最大宽度；

参数

返回

this

setText()

setText(text: string): this

定义于: src/ui/popup.ts:294

在弹出窗口中设置文本内容；该函数创建一个弹出窗口，其内容由给定的纯文本字符串组成；由于这是纯文本，而不是HTML，弹出窗口的内容将作为纯文本一样地处理；

参数

返回

this

示例

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

toggleClassName()

toggleClassName(className: string): boolean

定义于: src/ui/popup.ts:700

根据元素当前是否具有该类，在弹出窗口容器元素上添加或移除给定的CSS类；

参数

返回

boolean

如果类被移除则返回false，如果类被添加则返回true；

示例

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

trackPointer()

trackPointer(): this

定义于: src/ui/popup.ts:517

添加CSS类使弹出窗口追踪鼠标指针；当弹出窗口设置为跟踪指针时，它将作为鼠标的工具提示悬浮，而不是固定在地图上的一点；工具提示将浮动在鼠标指针上方并向上偏移；

返回

this

示例

let popup = new Popup({ closeButton: false })
  .setText("Hello, world!")
  .trackPointer()
  .addTo(map);