谷歌地图全屏显示时隐藏谷歌地图自动完成下拉菜单

Question

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

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

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

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

谢谢。

]

Answer 1

对于任何为此苦苦挣扎的人，如果 z-index 解决方案不起作用： 带有自动完成选项的 Google 地图生成的 div（“pac-container”）附加到 body 子元素。但是在全屏时，只会显示目标元素（地图 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");

}};

Answer 2

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

见这里

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

Answer 3

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

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;
}

Answer 4

感谢 Hengky Mulyono， 下面的代码对我有用。