Question

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

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

我尝试给弹出一个更高的z-index值，但仍然没有运气。

是否可以这样做？

Answer 1

问题在于Google Maps将其自身的内部div之一置于全屏模式。不论z-index如何，该div之外的所有内容都不可见。

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

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索引对于使自定义面板可见非常重要：

CSS：

#customPanel {
  z-index: 1;
}

全屏谷歌地图上的HTML元素

2 个答案: