我已经实现了谷歌地图,并在地图上覆盖了自动完成功能,并将 FullScreenControl 选项设置为“true”(您可以在下图中右侧看到 FullScreenControl)
我的问题是,当我通过单击 FullScreenControl 切换到全屏模式时,下拉菜单隐藏在谷歌地图后面。
看起来 ZIndex 太低了,但将其设置为非常大的数字似乎并不能解决问题。您可以从下图中看到下拉菜单存在,但仅位于全屏谷歌地图后面。
我确实找到了一个类似的问题和答案,其中有人使用正常的下拉菜单而不是谷歌地图自动完成。类似问题及解答
但是该解决方案对我不起作用。
设置 ZIndex 似乎不起作用。
我正在将 TypeScript 与 Angular2 结合使用。
谢谢。
]4
对于任何为此苦苦挣扎的人,如果 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");
}};
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)