css - Mapbox GL JS - 样式按钮

Question

我要添加一些简单的按钮(全屏控制和 GPS 定位)，但我需要至少移动它们，并且如果可能的话可以设置它们的样式。我无法在网上找到文档来执行此操作。如果可能的话，我希望能够像任何其他元素一样通过 CSS 来做到这一点。

我的两个按钮的代码:

topleftmapbox.addControl(new mapboxgl.FullscreenControl());   


topleftmapbox.addControl(new mapboxgl.GeolocateControl({  // 
positionOptions: {
    enableHighAccuracy: true
},
trackUserLocation: true
}));

除此之外，是否还可以使用 CSS 更改实际的 GPS 位置图标？ (蓝色圆圈表示你在哪里？)这个问题不需要回答，因为它是我正在考虑的一个非常可选的事情，但我必须以某种方式移动按钮，因为它们会干扰其他标签。

Answer 1

您可以通过 addControl 的 position 参数指定控件的一般位置: map.addControl(new mapboxgl.FullscreenControl(), 'top-right');

控件将被添加到:

<div class="mapboxgl-ctrl-top-right">
    <div class="mapboxgl-ctrl mapboxgl-ctrl-group">
        <button class="mapboxgl-ctrl-icon mapboxgl-ctrl-fullscreen" aria-label="Toggle fullscreen" type="button"></button>
    </div>
</div>

因此您可以使用正确的类路径设置样式:

.mapboxgl-ctrl-top-right .mapboxgl-ctrl-fullscreen {
  background-color: red;
}