google-maps - 当谷歌地图全屏为真时，谷歌地图自动完成下拉菜单隐藏

Question

我已经在 map 上实现了一个带有自动完成功能的谷歌地图，并且我已经将 FullScreenControl 选项设置为“true”(您可以在下图中看到右侧的 FullScreenControl)

我的问题是，当我通过单击 FullScreenControl 切换到全屏模式时，下拉菜单隐藏在谷歌地图后面。 似乎 ZIndex 太低，但将其设置为非常大的数字似乎并不能解决问题。您可以从下图中看到下拉菜单存在，但仅在全屏谷歌地图后面。

我确实发现了一个类似的问题，其中有人使用了普通的下拉菜单而不是谷歌地图自动完成。 Similar Question and answer

但是该解决方案对我不起作用。 设置 ZIndex 似乎不起作用。 我将 TypeScript 与 Angular2 一起使用。

谢谢。

] 4

Answer 1

对于任何为此苦苦挣扎的人，如果 z-index 解决方案不起作用: 带有自动完成选项的 Google map 生成的 div(“pac-container”)被附加到 body 子元素中。但全屏时，只会显示目标元素( map div)内的元素，因此忽略 z-index。

一个快速的解决方法是在进入全屏时将 pac-container div 移动到 map div 内，并在退出时将其移回。

document.onfullscreenchange = function ( event ) {
let target = event.target;
let pacContainerElements = document.getElementsByClassName("pac-container");
if (pacContainerElements.length > 0) {
    let pacContainer = document.getElementsByClassName("pac-container")[0];
    if (pacContainer.parentElement === target) {
        console.log("Exiting FULL SCREEN - moving pacContainer to body");
        document.getElementsByTagName("body")[0].appendChild(pacContainer);
    } else {
        console.log("Entering FULL SCREEN - moving pacContainer to target element");
        target.appendChild(pacContainer);
    }
} else {
    console.log("FULL SCREEN change - no pacContainer found");

}};