跳到主要内容
版本：9.1.0

Popup

弹窗组件。

new Popup(options: Object?)

参数​

名称类型描述
optionsObject必填参数
名称类型默认值描述
classNameString必填添加到弹窗容器的以空格分隔的 CSS 类名。
anchorStringcenter可选表示弹窗位置的字符，通过 Popup#setLngLat 与坐标集关联。选项有 "center"， "top"， "bottom"， "left"， "right"， "top-left"， "top-right"， "bottom-left"，以及 "bottom-right"。如未设置，将对锚点进行动态设置，以保证弹窗落在地图容器内，并偏向 "bottom"。
closeButtonBooleantrue可选如果为 true ，弹窗右上角将出现关闭按钮。
closeOnClickBooleantrue可选如果为 true ，点击地图时，弹窗将关闭。
maxWidthString240px可选设置弹窗 CSS 属性中最大宽度的字符串，例如 "300px"。为确保弹窗在缩放后能容纳内容，应设置此属性为 "none"。
offsetNumber/PointLike/Object可选弹窗位置的像素偏移，具体为：表示离弹窗位置距离的一个数字/表示常数偏移的 PointLike/表示每个锚点位置偏移程度的 Point 对象，负偏移量表示向左和向上。

案例​

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 mapmost.Popup({offset: popupOffsets, className: 'my-class'})
  .setLngLat(e.lngLat)
  .setHTML("<h1>Hello World!</h1>")
  .setMaxWidth("300px")
  .addTo(map);

实例成员​

addTo​

在地图上添加弹窗。

参数​
名称类型描述
mapMap必填要添加 Popup 的 Mapmost GL JS 地图。
案例​
var marker = new mapmost.Popup()
  .setLngLat([30.5, 50.5])
  .addTo(map); // 在地图上添加弹窗

getElement​

返回Popup的 HTML 元素。

案例​
// 修改 `Popup` 元素的字号大小
const popup = new mapmost.Popup()
    .setLngLat([-96, 37.8])
    .setHTML("<p>Hello World!</p>")
    .addTo(map);
const popupElem = popup.getElement();
popupElem.style.fontSize = "25px";

getLngLat​

返回弹窗的锚所在的地理位置。

返回的经度会在先前通过 setLngLat 设置的经度的基础之上以 360 度的倍数来变化，这是因为 Popup 要将锚的经度完全包围在周边以保证弹窗能在屏幕上显示。

案例​
const lngLat = popup.getLngLat();

getMaxWidth​

返回弹窗的最大宽度。

案例​
const maxWidth = popup.getMaxWidth();

isOpen​

弹窗若处于弹出状态则为 true ，若处于关闭状态则为 false。

案例​
const isPopupOpen = popup.isOpen();

remove​

从添加地图中移除弹窗。

案例​
var popup = new mapmost.Popup().addTo(map);
popup.remove();

setDOMContent​

将弹窗内容设置为以 DOM 节点形式提供的元素。

参数​
名称类型描述
htmlNodeNode必填用于作为弹窗内容的 DOM 节点。
案例​
// 用弹窗内容生成一个元素
var div = window.document.createElement('div');
div.innerHTML = 'Hello, world!';
var popup = new mapmost.Popup()
  .setLngLat(e.lngLat)
  .setDOMContent(div)
  .addTo(map);

setHTML​

将弹窗内容设置为以字符串形式提供的 HTML。

此方法不会进行 HTML 过滤或清理，因此只能用于受信任的内容。

参数​
名称类型描述
htmlString必填用于代表弹窗内容的 HTML 字符串。
案例​
const popup = new mapmost.Popup()
    .setLngLat(e.lngLat)
    .setHTML("<h1>Hello World!</h1>")
    .addTo(map);

setLngLat​

设置好弹窗的锚的地理位置后使弹窗移动过去。替代了 trackPointer() 的效果。

参数​
名称类型描述
lnglatLngLatLike必填设置弹窗的地理位置。
案例​
popup.setLngLat([-122.4194, 37.7749]);

setMaxWidth​

设置弹窗的最大宽度。实质上是在设置 CSS 的 max-width 属性。

参数​
名称类型描述
maxWidthString必填表示最大宽度值的字符串。
案例​
popup.setMaxWidth('50');

setText​

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

此功能将在 DOM 内创建一个 Text 节点，从而使原始 HTML 无法被插入。当弹窗内容由用户提供时，可使用此方法作为针对 XSS 的安全保护措施。

参数​
名称类型描述
textString必填弹窗的文本内容。
案例​
var popup = new mapmost.Popup()
  .setLngLat(e.lngLat)
  .setText('Hello, world!')
  .addTo(map);

trackPointer​

利用弹窗的锚，借助指针设备，追踪屏幕上光标的位置（在触屏模式下隐藏）。替代了 setLngLat 的效果。在多数情况下，此处 closeOnClick 和 closeButton 应设置为 false 。

案例​
const popup = new mapmost.Popup({closeOnClick: false, closeButton: false})
    .setHTML("<h1>Hello World!</h1>")
    .trackPointer()
    .addTo(map);

事件​

open
当弹窗被手动或程序打开时触发。
参数​
名称类型描述
popupPopup必填被打开的对象。
 
close
当弹窗被手动或程序关闭时触发。
参数​
名称类型描述
popupPopup必填被关闭的对象。