javascript - 全屏谷歌地图顶部的 HTML 元素

Question

当点击谷歌地图上的某些点时，我会显示一个小弹出框，它适用于常规的小谷歌地图模式。

但是，当通过单击全屏按钮(当 fullScreenControl 设置为 true 时显示)使谷歌地图处于全屏模式时，弹出窗口不会显示在 map 顶部。通过检查元素，它出现在正确的位置和正确的大小但不可见。

我试着给弹出窗口一个更高的 z-index 值，但仍然没有成功。

这有可能吗？

Answer 1

问题是谷歌地图将它自己的内部 div 之一置于全屏模式。无论 z-index 是多少，该 div 之外的所有内容都是不可见的。

我的解决方法需要两个步骤:

1) 将自定义元素移动到内部 div 中。复杂的是内部 div 在 google.maps.Map 实例化之后才存在。使用 jQuery，我在创建 map 对象后立即插入了这段代码:

var $map = $("#map");
var map = new google.maps.Map(
    $map.get(0),
    {/*map options*/},
);
var $fullscreenDiv = $map.children("div:first");
$("#mybutton1, #mybutton2").appendTo($fullscreenDiv);

2) 但元素在新位置将不可见，除非它们具有明确的 z-index。值是多少似乎并不重要。 z-index: 1 有效，但对于我的代码，我安全地使用了 z-index: 2147483647(最大值。)

#mybutton1, #mybutton2 {
    z-index: 2147483647;
}