向导航控件添加额外的 onClick()答案

【问题标题】：Add additional onClick() to Navigation Control向导航控件添加额外的 onClick()
【发布时间】：2019-09-18 12:35:50
【问题描述】：

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

我想添加这个功能

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

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

【问题讨论】：

你不能用.on添加一个事件监听器吗？例如 map.on('click', yourFunction);
@bdbdbd 每次用户点击地图而不是按钮时都会执行此函数。

标签： javascript reactjs maps mapbox mapbox-gl-js

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

您可以在指南针按钮上添加另一个点击监听器。

map.addControl(new mapboxgl.NavigationControl());
map.on("load", () => {
  document.querySelector('.mapboxgl-ctrl-compass').addEventListener('click', () =>{
    console.log('click');
    map.flyTo({
      center: [77.1025, 28.7041],
      zoom: 24,
      pitch: 0,
    });
  })
});

【讨论】：

这会覆盖原始函数，将其重置为北并移除倾斜。我也想保留这个功能。