MapBox GL Popup 信息框

1,266 阅读4分钟

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

image.png

示例:

    const popup = new mapboxgl.Popup({ closeOnClickfalse })  
    .setLngLat([-9637.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 一个点或由两个数字组成的数组,表示xy屏幕坐标(以像素为单位)
- 一个点的对象,指定每个锚位置的偏移量。
负偏移表示左和向上。
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');  
});