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

Question

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

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

我尝试为弹出窗口提供更高的 z-index 值，但仍然没有成功。

有没有可能做到这一点？

Answer 1

问题在于 Google 地图将其自己的内部 div 之一置于全屏模式。该 div 之外的所有内容均不可见，与 z-index 无关。

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

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

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

Answer 2

没有 jQuery 的解决方案。正如 sanchopancho13 上面提到的，您需要在地图实例化后将自定义菜单移动到 Google Maps DIV 中。 Javascript“appendChild”方法就是这样做的。如果引用的元素已经在 DOM 中，则 javascript "appendChild" 方法 移动 元素以及所有子元素和附加的事件处理程序。

https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

因此，像平常一样在 HTML 中创建自定义菜单或面板（使用事件处理程序）：

<div id="customPanel">
  <button onclick="action1()">Custom Button 1</button>
  <button onclick="action2()">Custom Button 2</button>
  <button onclick="action3()">Custom Button 3</button>
  <button onclick="action4()">Custom Button 4</button>
</div>

实例化地图并找到它的第一个 DIV 元素，并将您的 DIV 附加到 Google Map DIV 中：

var map = new google.maps.Map(map, { yourMapOptions });
var mapDiv = document.getElementById('map').getElementsByTagName('div')[0];
mapDiv.appendChild(document.getElementById("customPanel"));

这适用于全屏和普通模式的地图。如上所述，设置 Z-index 似乎对于使您的自定义面板可见是必不可少的：

CSS：

#customPanel {
  z-index: 1;
}