Question

我在组件的Shadow DOM中有一个Google Maps API组件，该组件最近开始显示如下：

全屏，放大+和缩小-在各自的按钮中分别显示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
});

但是，如果我启用streetViewControl或mapTypeControl，它们不会显示3次，则只能是全屏和缩放控件。

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

为什么还会显示其他图像？

如何解决或解决此问题？

Answer 1

我目前有一种解决方法。

在阴影根目录中添加以下样式：

.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中的错误，因此此问题已解决。如果您有相同的问题，请给链接的问题加注星标。

Answer 2

我只是使用：

#map img:not(:first-of-type){display: none}

（其中#map是地图容器的ID）。

更漂亮，它看起来可以使一切变得清晰。

Answer 3

您也可以暂时恢复到旧版本（3.35）。

Google Maps API在每个按钮中显示3次全屏和缩放图标

3 个答案: