Google maps 当谷歌地图全屏显示为真时，谷歌地图自动完成下拉列表隐藏

我已经实现了一个google地图，地图上显示了autocomplete，并且我已经将FullScreenControl选项设置为“true”（您可以在下图右侧看到FullScreenControl）

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

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

然而，这个解决方案对我不起作用。 设置ZIndex似乎不起作用。 我在用Angular2的打字脚本

多谢各位

---

]

我用将z-index添加到.pac容器来修复它

看

---

如果z-index解决方案不起作用，则任何人都会遇到此问题： 带有自动完成选项的GoogleMaps生成的div（“pac容器”）被附加到body子元素中。但在全屏显示时，仅显示目标元素（map div）内的元素，因此z索引被忽略

一个快速的解决方法是在进入全屏时将pac容器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");

}};

---

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

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

---

尝试更改z-index.pac容器元素我也有同样的问题，更改z-index不起作用错误报告：非常感谢。这是我需要的解决方案，因为我在模态中有一个映射。要避免未记录的解决方案。要避免未记录的解决方案。要避免未记录的解决方案。

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