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

【问题标题】：Google maps API showing fullscreen and zoom icons 3 times in each buttonGoogle maps API 在每个按钮中显示全屏和缩放图标 3 次
【发布时间】：2018-12-19 10:28:54
【问题描述】：

我在组件的 Shadow DOM 中有一个 Google 地图 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，它们不会显示三次，它只是全屏和缩放控件。

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

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

如何解决或解决此问题？

【问题讨论】：

你能提供更多关于如何重现这个的说明吗？我在这里看不到问题：jsfiddle.net/k5aqmo3s/1
@StephenFarrar 我认为问题是由于地图被加载到 Web 组件中，在其上方放置一个阴影 DOM，你会得到错误：jsfiddle.net/KeithHenry/6yfmehLr
这似乎是 Maps API 中的一个错误issuetracker.google.com/issues/122064478

标签： javascript google-maps google-maps-api-3

【解决方案1】：

我现在有一个可以解决这个问题的 hack。

将以下样式添加到阴影根中：

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

【讨论】：

【解决方案2】：

我只是使用：

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

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

更漂亮，看起来一切都清楚。

【讨论】：

它的 CSS 更少，但您失去了悬停和按钮活动效果，并可能隐藏控件中的其他图像。选定的答案替换了地图期望从document 级联的样式（但这不是因为影子DOM）。这只是让 Maps API 与现代浏览器技术（甚至只是影子 DOM）一起工作所需的大量修复之一，我将所有这些都包装在一个地图 Web 组件中，因此更简单的 CSS 不如完整（如果非常笨重）修复。

【解决方案3】：

您也可以暂时恢复到旧版本 (3.35) 以解决问题。

【讨论】：