唯杰地图-VJMAP

# 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);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# addTo

将弹出窗口添加到地图。

# Parameters

  • map **[Map][1]**要添加弹出窗口的地图。

# Examples

new vjmap.Popup()
  .setLngLat([0, 0])
  .setHTML("<h1>Null Island</h1>")
  .addTo(map);
1
2
3
4

返回**弹出窗口** this

# isOpen

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

# remove

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

# Examples

var popup = new vjmap.Popup().addTo(map);
popup.remove();
1
2

返回**弹出窗口** 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);
1
2
3
4

返回**弹出窗口** 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";
1
2
3
4
5
6
7

返回**HTMLElement**元素

# setText

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

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

# Parameters

  • text string 弹出窗口的文本内容。

# Examples

var popup = new vjmap.Popup()
  .setLngLat(e.lngLat)
  .setText('Hello, world!')
  .addTo(map);
1
2
3
4

返回**弹出窗口** 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);
1
2
3
4

返回**弹出窗口** 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);
1
2
3
4
5
6
7

返回**弹出窗口** this

# addClassName

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

# Parameters

  • className string 要添加到弹出式容器的具有 CSS 类名的非空字符串

# Examples

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

# removeClassName

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

# Parameters

  • className string 要从弹出式容器中删除的具有 CSS 类名的非空字符串

# Examples

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

# setOffset

设置弹出窗口的偏移量。

# Parameters

  • offset **抵消？**设置弹出窗口的偏移量。

返回**弹出窗口** this

# toggleClassName

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

# Parameters

  • className string 要添加/删除的带有 CSS 类名的非空字符串

# Examples

let popup = new vjmap.Popup()
popup.toggleClassName('toggleClass')
1
2

返回**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');
});
1
2
3
4
5
6
7

# 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');
});
1
2
3
4
5
6
7

← MapMouseEvent →