Question

Mapbox提供NavigationControls。使用Mapbox时，Compas（及其他）免费提供。我可以使用指南针使x和y轴倾斜。当我倾斜地图并单击指南针时，将恢复倾斜。有没有办法在指南针上添加其他onClick()功能？

我要添加此功能

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

目前，我为此有一个额外的按钮，可以将其手动添加到地图中。但我想在单击指南针时将功能包括在内。这可能吗？

Answer 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,
)

Answer 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,
    });
  })
});

将其他onClick（）添加到导航控件

2 个答案: