全屏Google地图顶部的HTML元素 [英] HTML element on top of full screen Google map

问题描述

当单击Google地图上的某些点时，我会显示一个小弹出框，并且该框可以在常规的小Google地图模式下使用.

I am showing a small popup box when certain points on Google map are clicked, and it works on the regular small Google map mode.

但是，当通过单击全屏按钮(在fullScreenControl设置为true时显示)将Google地图置于全屏模式时，弹出式菜单不会显示在地图顶部.通过检查该元素，它会显示在正确的位置和正确的大小，但不可见.

However when the google map is on full screen mode by clicking the full screen button (shown when fullScreenControl is set to true), the popup doesn't show on top of the map. By inspecting the element it appears at correct position and correct size but is invisible.

我尝试为弹出窗口设置更高的z-index值，但仍然没有运气.

I tried giving the popup a higher z-index value but still no luck.

有可能做到这一点吗?

推荐答案

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

The problem is that Google Maps puts one of its own inner divs into fullscreen mode. Everything outside of that div is not visible, regardless of z-index.

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

My workaround required two steps:

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

1) Move the custom element(s) inside the inner div. The complication is that the inner div doesn't exist until after google.maps.Map is instantiated. Using jQuery, I inserted this code immediately after creating the map object:

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(最大值).

2) But the elements won't be visible in their new location unless they have an explicit z-index. It doesn't seem to matter what the value is. z-index: 1 works, but for my code I played it safe and used z-index: 2147483647 (the maximum value.)

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

这篇关于全屏Google地图顶部的HTML元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！