Google 当 Google 地图全屏为真时隐藏地图自动完成下拉菜单

Question

我已经实现了一个 google 地图，地图上覆盖了自动完成功能，我已经将 FullScreenControl 选项设置为 "true"（您可以在下图中的右侧看到 FullScreenControl）

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

我确实找到了一个类似的问题和答案，其中有人使用了正常的下拉菜单而不是 google 地图自动完成。 Similar Question and answer

但是这个解决方案对我不起作用。设置 ZIndex 似乎不起作用。我在 Angular2 中使用 TypeScript。

谢谢。

]4

Answer 1

我通过将 z-index 添加到 .pac-container 来修复它

见here

 .pac-container, .pac-item{
    z-index: 2147483647 !important;
 }

Answer 2

如果 z-index 解决方案不起作用，对于任何为此苦苦挣扎的人：使用自动完成选项生成的 Google 映射 div ("pac-container") 附加到 body 子元素。但是在全屏时，只会显示目标元素（地图 div）内的元素，因此 z-index 会被忽略。

一个快速的解决方法是在进入全屏时将 pac-container div 移动到地图 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");

}};

Answer 3

谢谢@vladhorby！由于更新 z-index 对我的情况不起作用，我最终得到了你的解决方案。我有 1 个小错误，不知何故，在全屏模式下选项位置不正确。我添加了很少的代码来修复这个问题。这个想法是在全屏模式下添加一个 class ，并在离开全屏后删除它。希望对遇到同样情况的人有所帮助。

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) {
        document.getElementsByTagName("body")[0].appendChild(pacContainer);
        pacContainer.className += pacContainer.className.replace("fullscreen-pac-container", "");
      } else {
        target.appendChild(pacContainer);
        pacContainer.className += " fullscreen-pac-container";
      }
    }
  };

最后一件事将其添加到您的 css 文件中：

.fullscreen-pac-container[style]{
  z-index: 2547483647 !important;
  top:50px !important;
}

Google 当 Google 地图全屏为真时隐藏地图自动完成下拉菜单

Google Maps AutoComplete dropdown hidden when Google Maps Full Screen is true

google-maps

autocomplete

z-index

fullscreen

dropdown