javascript - 添加额外的 onClick() 到导航控件

Question

Mapbox 优惠NavigationControls 。使用 Mapbox 时免费提供指南针(和其他)。我可以使用指南针围绕 x 轴和 y 轴倾斜。当我倾斜 map 并单击指南针时，倾斜会恢复。有没有办法在指南针上添加一个额外的 onClick() 函数？

我想添加此功能

this.map.flyTo({
  center: ...
  zoom: 24
});

目前我有一个额外的按钮，我手动将其添加到 map 中。但我希望在单击指南针时包含功能。这可能吗？

Answer 1

您可以使用 mousedown 事件来避免覆盖 click 事件。

document.querySelector('.mapboxgl-ctrl-compass').addEventListener('mousedown', () =>{
   //your code
  })

如果您使用 React，要让 querySelector 有时间查找元素，请使用 setTimeout

setTimeout(
 () =>
  document.querySelector('.mapboxgl-ctrl-compass')
  .addEventListener('mousedown', () => {
   //your code
   }),
   500,
)