gpt4 book ai didi

javascript - 谷歌地图 API 在每个按钮中显示 3 次全屏和缩放图标

转载 作者:行者123 更新时间:2023-11-29 20:47:29 29 4
gpt4 key购买 nike

我在组件的 Shadow DOM 中有一个 Google map API 组件,最近开始显示如下:

broken map

全屏、放大+和缩小-分别在各自的按钮中显示3次。

我的初始化代码看起来像这样:

new google.maps.Map(mapElement, {
keyboardShortcuts: false, // MUST be off, thanks to https://issuetracker.google.com/issues/73644075 breaking all key inputs across Shadow DOM
streetViewControl: false,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{ featureType: 'poi', elementType: 'labels', stylers: [{ visibility: 'off' }] }] // Hide POI so our markers are more obvious
});

但是,如果我启用 streetViewControlmapTypeControl 它们不会显示三次,只有全屏和缩放控件。

这是现存的问题(需要支持 Shadow DOM 的浏览器):https://jsfiddle.net/KeithHenry/6yfmehLr/

为什么会出现额外的图像?

我该如何解决或解决这个问题?

最佳答案

我现在有一个解决这个问题的技巧。

将以下样式添加到影子根:

.gm-control-active > img {
box-sizing: content-box;
display: none;
left: 50%;
pointer-events: none;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
}

.gm-control-active > img:nth-child(1) {
display:block;
}

.gm-control-active:hover > img:nth-child(1),
.gm-control-active:active > img:nth-child(1) {
display:none;
}

.gm-control-active:hover > img:nth-child(2),
.gm-control-active:active > img:nth-child(3) {
display:block;
}

这些由 Maps API 添加到 <head> ,但它们不会级联通过任何 Shadow DOM。这是 API 中的错误:https://issuetracker.google.com/issues/122064478

由于这是 API 中的错误,因此已解决此问题。如果您有同样的问题,请给链接的问题加注星号。

关于javascript - 谷歌地图 API 在每个按钮中显示 3 次全屏和缩放图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53849251/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com