MapBox GL Popup 信息框Popup 是用于在地图上指定经纬度位置，展示自定义内容的气泡示例： API 配

Popup 是用于在地图上指定经纬度位置，展示自定义内容的气泡

示例：

    const popup = new mapboxgl.Popup({ closeOnClick: false })  
    .setLngLat([-96, 37.8])  
    .setHTML('<h1>Hello World!</h1>')  
    .addTo(map);

API 配置

名称	描述
anchor	一个字符串，指示弹出窗口中应位于最接近坐标的部分，通过Popup#setLngLat设置。选项有`'center'`”、“'top'``'bottom'``'left'``'right'``'top-left'``'top-right'”、“`'bottom-left'`和`'bottom-right'`”。如果未设置，锚点将被动态设置，以确保弹出窗口位于地图容器中，并偏好`'bottom'`”
className	要添加到弹出式容器的空格分隔的CSS类名。
closeButton 默认： `true`	如果为`true`，关闭按钮将出现在弹出窗口的右上角
closeOnClick 默认： `true`	如果为`true`，当单击地图时，弹出窗口将关闭
closeOnMove 默认： `false`	如果为`true`，当地图移动时，弹出窗口将关闭
focusAfterOpen 默认： `true`	如果为`true`，弹出窗口将尝试在弹出窗口中对焦第一个可聚焦元素
maxWidth 默认： `'240px'`	设置弹出窗口最大宽度的CSS属性的字符串（例如，`'300px'`）。为了确保弹出窗口调整大小以适应其内容，请将此属性设置为`'none'`”
offset	应用于弹出窗口位置的像素偏移，指定为： - 指定与弹出窗口位置距离的单个数字 - 指定常量偏移的PointLike 一个点或由两个数字组成的数组，表示`x`和`y`屏幕坐标（以像素为单位） - 一个点的对象，指定每个锚位置的偏移量。负偏移表示左和向上。

const markerHeight = 50;  
const markerRadius = 10;  
const linearOffset = 25;

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

方法

1、addTo 将弹出窗口添加到地图中

参数： map 要添加弹出窗口的Mapbox GL JS地图

2、isOpen 检查弹出窗口是否打开。

示例：const isPopupOpen = popup.isOpen();

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

示例：

const popup = new mapboxgl.Popup().addTo(map);  
popup.remove();

4、getLngLat 返回弹出窗口锚点的地理位置

示例：const lngLat = popup.getLngLat();

5、setLngLat 设置弹出窗口锚点的地理位置，并将弹出窗口移动到它

示例：popup.setLngLat([-122.4194, 37.7749]);

6、getElement 返回`Popup`的HTML元素。

示例：

const popup = new mapboxgl.Popup()  
.setLngLat([-96, 37.8])  
.setHTML("<p>Hello World!</p>")  
.addTo(map);  

const popupElem = popup.getElement();  
popupElem.style.fontSize = "25px";

7、setText 将弹出窗口的内容设置为文本字符串

参数： string

示例：

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

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

参数： HTML

示例

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

9、getMaxWidth 返回弹出窗口的最大宽度

示例： const maxWidth = popup.getMaxWidth();

10、setMaxWidth 设置弹出窗口的最大宽度。这是设置CSS属性`max-width`

参数：maxWidth(string)表示最大宽度值的字符串。

示例：

popup.setMaxWidth('50');

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

参数：htmlNode(Element)用作弹出窗口内容的DOM节点。

示例：

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

12、addClassName 将CSS类添加到弹出式容器元素中

参数：className(string)非空字符串，带有CSS类名，可添加到弹出式容器中。

示例：

const popup = new mapboxgl.Popup();  
popup.addClassName('some-class');

13、removeClassName 从弹出式容器元素中删除CSS类

参数：className(string)非空字符串，带有CSS类名，可从弹出式容器中删除

示例：

const popup = new mapboxgl.Popup({className: 'some classes'});  
popup.removeClassName('some')

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

示例：

popup.setOffset(10);

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

参数：className(string)要添加/删除的CSS类名的非空字符串。

示例：

const popup = new mapboxgl.Popup();  
popup.toggleClassName('highlighted');

监听事件：on

1、open 当手动或编程打开弹出窗口时触发。

示例：

const popup = new mapboxgl.Popup();  
// Set an event listener that will fire  
// any time the popup is opened  
popup.on('open', () => {  
    console.log('popup was opened');  
});

2、close 当弹出窗口手动或编程关闭时触发

// Create a popup  
const popup = new mapboxgl.Popup();  
// Set an event listener that will fire  
// any time the popup is closed  
popup.on('close', () => {  
    console.log('popup was closed');  
});

MapBox GL Popup 信息框