所以,我知道我们在Mapbox GL Api中有Marker.togglePopup()
。
但是我们能以编程方式关闭所有弹出窗口吗?
答案 0 :(得分:7)
以下是一个示例:https://jsfiddle.net/kmandov/eozdazdr/
单击右上角的按钮可打开/关闭弹出窗口。
鉴于您有弹出窗口和标记:
var popup = new mapboxgl.Popup({offset:[0, -30]})
.setText('Construction on the Washington Monument began in 1848.');
new mapboxgl.Marker(el, {offset:[-25, -25]})
.setLngLat(monument)
.setPopup(popup)
.addTo(map);
您可以通过调用以下方式关闭弹出窗口:
popup.remove();
或者您可以致电:
打开它popup.addTo(map);
正如您在Marker source中所看到的,togglePopup
在内部使用了这两种方法:
togglePopup() {
var popup = this._popup;
if (!popup) return;
else if (popup.isOpen()) popup.remove();
else popup.addTo(this._map);
}
答案 1 :(得分:6)
接受的答案不适用于我的用例(我未使用标记)。通过使用mapbox的内置事件工作流程,我能够提出一个不同的解决方案。希望这可以帮助其他人。
Mapbox允许您侦听地图上的事件(并手动触发它们)。该文档没有提及它,但是您可以使用自定义事件。
给出一个弹出窗口:
// Create popup and add it to the map
const popup = new mapboxgl.Popup({ offset: 37, anchor: 'bottom' }).setDOMContent('<h5>Hello</h5>').setLngLat(feature.geometry.coordinates).addTo(map);
// Add a custom event listener to the map
map.on('closeAllPopups', () => {
popup.remove();
});
要关闭所有弹出窗口时,触发事件:
map.fire('closeAllPopups');
答案 2 :(得分:2)
Mapbox会自动将类.mapboxgl-popup
用于弹出窗口。您也可以使用options.className
添加其他类。
因此,如果您有可用的jQuery,请执行以下操作:
$('.mapboxgl-popup').remove();
或者普通的javascript:
const popup = document.getElementsByClassName('mapboxgl-popup');
if ( popup.length ) {
popup[0].remove();
}
我敢肯定,您可以假设只有一个弹出窗口可以打开。默认行为似乎是,如果打开一个并单击第二个项目,则当第二个项目打开时,第一个弹出窗口将从DOM中完全删除。如果您的应用程序以某种方式允许多个打开的弹出窗口,则需要使用纯js遍历并删除每个弹出窗口,而不是仅使用第一项。
答案 3 :(得分:0)
我知道这是一个老问题,但我最近在研究 Mapbox。从 mapbox-gl v2.3 开始,mapboxgl.Popup 有一个 closeOnClick 属性,如果设置为 true,当您点击远离弹出窗口时,弹出窗口就会消失。
let popup = new mapboxgl.Popup({
anchor: "top",
closeOnClick: true,
});
map.on(
"click",
"location",
(e) => {
map.getCanvas().style.cursor = "pointer";
let coordinates = e.features[0].geometry.coordinates.slice();
popup
.setLngLat(coordinates)
.setHTML("what I want to display")
.addTo(map);
}
);
或者,您可以在“mouseenter”而不是“click”上显示弹出窗口并添加“mouseleave”事件以删除弹出窗口:
map.on(
"mouseleave",
"location",
() => {
map.getCanvas().style.cursor = "";
popup.remove();
}
);