根据我的Mapbox地图当前的缩放级别,标记图标的大小会有所不同。所有自定义标记都在一个div容器中,并且我更改类来更改它们的大小。
现在我遇到了这样的问题:如果图标较小,则弹出窗口(弹出窗口与标记图标之间的距离)的偏移量太大。
是否有可能随着缩放级别改变弹出窗口的偏移量?
现在我遇到了这样的问题:如果图标较小,则弹出窗口(弹出窗口与标记图标之间的距离)的偏移量太大。
是否有可能随着缩放级别改变弹出窗口的偏移量?
this.map.on('zoom', () => {
if (this.map.getZoom() > 8) {
// zooming in, remove offset to position
var popups: any = document.getElementsByClassName("mapboxgl-popup");
for (let popup of popups) {
if (popup.classList.contains("my-offset-class")) {
popup.classList.remove("my-offset-class");
}
}
} else {
// zooming out, add left offset to position
var popups: any = document.getElementsByClassName("mapboxgl-popup");
for (let popup of popups) {
if (!popup.classList.contains("my-offset-class")) {
popup.classList.add("my-offset-class");
}
}
}
});
这里 mapboxgl-popup
是弹出框的标准 CSS 类(您可以使用任何自定义类,只要将其应用于您的弹出框),而 my-offset-class
是应用偏移量的 CSS 类。
.zoom-4 > .mapboxgl-popup.mapboxgl-popup-anchor-bottom,
.zoom-4 > .mapboxgl-popup.mapboxgl-popup-anchor-bottom-left,
.zoom-4 > .mapboxgl-popup.mapboxgl-popup-anchor-bottom-right
{
top: 10px;
}
.zoom-4 > .mapboxgl-popup.mapboxgl-popup-anchor-left {
top: 6px;
left: -4px;
}
.zoom-4 > .mapboxgl-popup.mapboxgl-popup-anchor-right {
top: 6px;
left: 2px;
}