mapbox gl map没有焦点 - 在拖动地图之前，+符号不起作用

Question

我无法找到如何在我的Mapbox地图上放大/缩小+和 - 键。

单击地图似乎没有将焦点设置在地图上。 如果我使用鼠标拖动地图，则+和 - 键将放大/缩小。

我找不到其他人抱怨这个问题。甚至一些Mapbox示例也有这个问题。

Answer 1

当地图在页面上加载完毕后，它似乎没有“焦点”。我的地图ID是“地图”，所以我尝试了

$('#map').focus();

这不能解决问题。使用浏览器调试器中的“检查元素”，我查看了地图对象中的内容。 Mapbox使用画布作为地图

    <div class="mapboxgl-canvas-container mapboxgl-interactive"> 
<canvas class="mapboxgl-canvas" tabindex="0" aria-label="Map" 
width="1196" height="817" style="position: absolute; 
width: 1088px; height: 743px;"></canvas>...

因此，在画布上使用类选择器时，我使用jQuery在地图加载完成后将焦点设置到画布上。

map.on('load', function{
      $('.mapboxgl-canvas').focus();
}