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');
});