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

HTML element on top of full screen Google map

本文关键字：HTML 元素 顶部 谷歌地图      更新时间：2023-09-26

我显示了一个小弹出框，当某些点在谷歌地图点击，它的工作在常规的小谷歌地图模式。

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

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

这有可能吗?

问题是Google Maps将自己的一个内部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索引。它的值是多少似乎并不重要。z-index: 1工作，但对于我的代码，我玩它的安全，并使用z-index: 2147483647(最大值)。

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

一个没有jQuery的解决方案。正如上面sanchopanch13所提到的，在地图实例化之后，您需要将自定义菜单移动到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;
}
相关文章：