---
title: Popup
source: https://vjmap.com/doc/Popup.html
---

# Popup
**扩展事件**


一个弹出组件。

### Parameters
- `options` **`Object`?**
    - `options.closeButton` **`boolean`**如果`true`，弹出窗口的右上角将出现一个关闭按钮。（可选，默认`true`）
    - `options.closeOnClick` **`boolean`**如果`true`，则单击地图时将关闭弹出窗口。（可选，默认`true`）
    - `options.closeOnMove` **`boolean`**如果`true`，则当地图移动时弹出窗口将关闭。（可选，默认`false`）
    - `options.focusAfterOpen` **`boolean`**如果`true`，则弹出窗口将尝试聚焦弹出窗口内的第一个可聚焦元素。（可选，默认`true`）
    - `options.anchor` **`string`?** 一个字符串，指示应该通过`Popup#setLngLat`定位到最接近坐标集的`Popup 部分`。选项包括`'center'`，`'top'`，`'bottom'`，`'left'`，`'right'`，`'top-left'`， `'top-right'`，`'bottom-left'`，和`'bottom-right'`。如果未设置，锚点将被动态设置以确保弹出窗口位于地图容器内，并且优先选择`'bottom'`。
    - `options.offset` **( `number`| [PointLike][166] | `Object`)？** 应用于弹出窗口位置的像素偏移指定为：- 指定与弹出窗口位置距离的单个数字
        - 指定常量偏移量的[PointLike][166]
        - [Point][165] s的对象，指定每个锚点位置的偏移量负偏移表示向左和向上。
    - `options.className` **`string`?** 添加到弹出容器的以空格分隔的 CSS 类名
    - `options.maxWidth` **`string`** 设置弹出窗口最大宽度的 CSS 属性的字符串，例如`'300px'`. 要确保弹出窗口调整大小以适合其内容，请将此属性设置为`'none'`。可用值可以在这里找到：`https` : `//developer.mozilla.org/en-US/docs/Web/CSS/max-width `（可选，默认`'240px'`）

### Examples
```
var markerHeight = 50, markerRadius = 10, linearOffset = 25;
var popupOffsets = {
 'top': [0, 0],
 'top-left': [0,0],
 'top-right': [0,0],
 'bottom': [0, -markerHeight],
 'bottom-left': [linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
 'bottom-right': [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
 'left': [markerRadius, (markerHeight - markerRadius) * -1],
 'right': [-markerRadius, (markerHeight - markerRadius) * -1]
 };
var popup = new vjmap.Popup({offset: popupOffsets, className: 'my-class'})
  .setLngLat(e.lngLat)
  .setHTML("<h1>Hello World!</h1>")
  .setMaxWidth("300px")
  .addTo(map);
```

### addTo

将弹出窗口添加到地图。

#### Parameters
- `map` **[Map][1]**要添加弹出窗口的地图。

#### Examples
```
new vjmap.Popup()
  .setLngLat([0, 0])
  .setHTML("<h1>Null Island</h1>")
  .addTo(map);
```

返回**`弹出窗口`** `this`

### isOpen
如果弹出窗口是打开的，如果它是关闭的，则返回。**`boolean`** `true``false`

### remove
从已添加到的地图中删除弹出窗口。

#### Examples
```
var popup = new vjmap.Popup().addTo(map);
popup.remove();
```

返回**`弹出窗口`** `this`

### getLngLat
返回弹出窗口锚点的地理位置。

结果的经度可能与先前设置的经度相差 360 度的倍数，`setLngLat`因为`Popup`将锚定经度包装在世界的副本上以保持弹出窗口在屏幕上。

返回**[LngLat][230]**弹出窗口锚点的地理位置。

### setLngLat
设置弹出窗口锚点的地理位置，并将弹出窗口移动到它。替换 trackPointer() 行为。

#### Parameters
- `lnglat` **[LngLatLike][284]**设置为弹出窗口锚点的地理位置。

返回**`弹出窗口`** `this`

### trackPointer
使用指针设备将弹出锚点跟踪到屏幕上的光标位置（它将在触摸屏上隐藏）。替换`setLngLat`行为。对于大多数用例，将`closeOnClick`和设置`closeButton`为`false`。

#### Examples
```
var popup = new vjmap.Popup({ closeOnClick: false, closeButton: false })
  .setHTML("<h1>Hello World!</h1>")
  .trackPointer()
  .addTo(map);
```

返回**`弹出窗口`** `this`

### getElement
返回`Popup`的 HTML 元素。

#### Examples
```
// Change the `Popup` element's font size
var popup = new vjmap.Popup()
  .setLngLat([-96, 37.8])
  .setHTML("<p>Hello World!</p>")
  .addTo(map);
var popupElem = popup.getElement();
popupElem.style.fontSize = "25px";
```

返回**`HTMLElement`**元素

### setText
将弹出窗口的内容设置为一串文本。

此函数创建一个`文本 `DOM 中的节点，因此它无法插入原始 HTML。如果弹出内容是用户提供的，请使用此方法来防止 XSS。

#### Parameters
- `text` **`string`** 弹出窗口的文本内容。

#### Examples
```
var popup = new vjmap.Popup()
  .setLngLat(e.lngLat)
  .setText('Hello, world!')
  .addTo(map);
```

返回**`弹出窗口`** `this`

### setHTML

将弹出窗口的内容设置为作为字符串提供的 HTML。

此方法不执行 HTML 过滤或清理，并且必须仅用于受信任的内容。如果内容是不受信任的文本字符串，请考虑`Popup#setText`。

#### Parameters
- `html` **`string`** 表示弹出窗口的 HTML 内容的字符串。

#### Examples
```
var popup = new vjmap.Popup()
  .setLngLat(e.lngLat)
  .setHTML("<h1>Hello World!</h1>")
  .addTo(map);
```

返回**`弹出窗口`** `this`

### getMaxWidth
返回弹出窗口的最大宽度。

返回**`string`**弹出窗口的最大宽度。

### setMaxWidth
设置弹出窗口的最大宽度。这是设置 CSS 属性`max-width`。可用值可以在这里找到：`https` : `//developer.mozilla.org/en-US/docs/Web/CSS/max-width `

#### Parameters
- `maxWidth` **`string`** 表示最大宽度值的字符串。

返回**`弹出窗口`** `this`

### setDOMContent
将弹出窗口的内容设置为作为 DOM 节点提供的元素。

#### Parameters
- `htmlNode` **`节点 `** 用作弹出窗口内容的 DOM 节点。

#### Examples
```
// create an element with the popup content
var div = window.document.createElement('div');
div.innerHTML = 'Hello, world!';
var popup = new vjmap.Popup()
  .setLngLat(e.lngLat)
  .setDOMContent(div)
  .addTo(map);
```

返回**`弹出窗口`** `this`

### addClassName
将 CSS 类添加到弹出式容器元素。

#### Parameters
- `className` **`string`** 要添加到弹出式容器的具有 CSS 类名的非空字符串

#### Examples
```
let popup = new vjmap.Popup()
popup.addClassName('some-class')
```

### removeClassName
从弹出式容器元素中删除 CSS 类。

#### Parameters
- `className` **`string`** 要从弹出式容器中删除的具有 CSS 类名的非空字符串

#### Examples
```
let popup = new vjmap.Popup()
popup.removeClassName('some-class')
```

### setOffset
设置弹出窗口的偏移量。

#### Parameters
- `offset` **抵消？**设置弹出窗口的偏移量。

返回**`弹出窗口`** `this`

### toggleClassName
在弹出容器上添加或删除给定的 CSS 类，具体取决于容器当前是否具有该类。

#### Parameters
- `className` **`string`** 要添加/删除的带有 CSS 类名的非空字符串

#### Examples
```
let popup = new vjmap.Popup()
popup.toggleClassName('toggleClass')
```

返回**`boolean`**如果取出假回报类，如果加入的类，然后返回true

### open
当手动或以编程方式打开弹出窗口时触发。

类型： `Object`

#### Properties
- `popup` 已打开的**`弹出`**对象

#### Examples
```
// Create a popup
var popup = new vjmap.Popup();
// Set an event listener that will fire
// any time the popup is opened
popup.on('open', function(){
  console.log('popup was opened');
});
```

### close
当手动或以编程方式关闭弹出窗口时触发。

类型： `Object`

#### Properties
- `popup` 已关闭的**`弹出`**对象

#### Examples
```
// Create a popup
var popup = new vjmap.Popup();
// Set an event listener that will fire
// any time the popup is closed
popup.on('close', function(){
  console.log('popup was closed');
});
```