Mapbox-gl popup.on('open') 不触发

Question

Using Mapbox GL Javascript Web

我的弹出窗口正在打开，但"打开"事件未触发。我读到这在不久前得到了修复，所以我在这里做错了什么：

this.map.on('click', 'listings', (e: any) => {
const coordinates = e.features[0].geometry.coordinates.slice();
const detailURI = e.features[0].properties.detailURI;
new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML(title)
.addTo(this.map)
.on('open', () => {
console.log('Popup opened'); // <--- Not firing
// Add a click listener to the custom button with dynamic URI
document.getElementById('popup-detail-button')
.addEventListener('click', () => {
console.log(`Clicked with link: ${detailURI}`);
});
});
});

如果我这样做：

this.map.on('click', 'listings', (e: any) => {
const coordinates = e.features[0].geometry.coordinates.slice();
const detailURI = e.features[0].properties.detailURI;
new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML(this.returnPopupHTML(image))
.addTo(this.map);
// Add a click listener
document.getElementById('popup-detail-button')
.addEventListener('click', () => {
console.log(`Clicked with link: ${detailURI}`); // <-- Only works if closing popup before opening another one
});
});

按钮上的单击侦听器有效，但是如果我在打开另一个弹出窗口之前没有关闭弹出窗口，则事件不会触发。这是用户经常做的事情：他们打开一个弹出窗口，然后滚动并打开另一个弹出窗口而不关闭第一个弹出窗口。所以我在这里真正想做的是确保每当打开弹出窗口并单击它的自定义按钮时 - 事件都使用正确的 URI 注册。

谢谢

Answer 1

我相信你现在已经想通了。 我只是为遇到这种情况的任何其他人发布此内容。 但我遇到了同样的问题。 最初我试图这样做。

const popup = new mapboxgl.Popup()
.setLngLat(e.lngLat)
.setHTML(
this.generatePointAndMarkerPopupHtml(layerClicked[0]),
)
.addTo(this.map);
popup.on('open', e => {
console.log('it is open');
});

奇怪的是，当我使用"关闭"控制台时.log可以工作，但不能使用"打开"。

最终起作用的是你的格式，但把 .on 事件侦听器放在 .addTo(map( 之前：

const layerClicked: mapboxgl.MapboxGeoJSONFeature[] = this.map.queryRenderedFeatures(
e.point,
{
layers: this.currentPointAndMarkerLayerIds,
},
);    
const popup = new mapboxgl.Popup()
.setLngLat(e.lngLat)
.setHTML(
this.generatePointAndMarkerPopupHtml(layerClicked[0]),
)
.on('open', e => {
console.log('It is open');
})
.addTo(this.map);

谢谢你让我朝着正确的方向前进！

编辑

如果你想添加一个事件侦听器，我就这样做。

const popup = new mapboxgl.Popup()
.setLngLat(e.lngLat)
.setHTML(
this.generatePointAndMarkerPopupHtml(layerClicked[0]),
)
.on('open', e => {
if (document.getElementById('drive-time')) {
document
.getElementById('drive-time')
.addEventListener('click', e => {
console.log(e);
});
}
})
.addTo(this.map);

我检查文档元素是否存在，否则它将在开发人员控制台中为我创建错误。