Javascript 谷歌地图信息窗口Z索引

Javascript 谷歌地图信息窗口Z索引,javascript,maps,z-index,infowindow,Javascript,Maps,Z Index,Infowindow,信息窗口是否可能在Z索引高于谷歌地图的元素上弹出 假设谷歌地图的z指数为零。该元素的z索引为100。 单击标记将在与图元相同的区域中显示一个信息窗口。我们如何让这个信息窗口悬停在元素上方而不是下方 我已经尝试将InfoWindow的z索引设置为更高的值,但这似乎没有任何作用 我在下面制作了一个演示,演示了这个问题。 任何帮助都将不胜感激 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3

信息窗口是否可能在Z索引高于谷歌地图的元素上弹出

假设谷歌地图的z指数为零。该元素的z索引为100。 单击标记将在与图元相同的区域中显示一个信息窗口。我们如何让这个信息窗口悬停在元素上方而不是下方

我已经尝试将InfoWindow的z索引设置为更高的值,但这似乎没有任何作用

我在下面制作了一个演示,演示了这个问题。 任何帮助都将不胜感激

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 


信息窗口Z指数测试
var coords=[[35.50733,35.12768,3]];/,[-23.806549, 133.96059, 13], [68.169002, -134.425964, 10], [69.529715, -132.109222, 10], [80.231047, -22.730713, 7], [35.108675, -117.961578, 12]];
var映射;
函数映射选择(coords){
var current=coords[Math.floor(Math.random()*(coords.length));
//mapShow(当前[0],当前[1],当前[2],document.getElementById('map');
mapShow(当前[0],当前[1],当前[2],document.getElementById('map_canvas');
};
函数初始化(){
地图选择(coords);
}
功能图显示(横向、横向、横向、横向){
变量myOptions={
“缩放”:缩放,
“中心”:新的google.maps.LatLng(lat,lng),
“mapTypeId”:google.maps.mapTypeId.SATELLITE,
“disableDefaultUI”:true,
“滚轮”:false,
“可拖动”:false
}
map=new google.maps.map(document.getElementById(“map_canvas”),myOptions);
//标记
//装载标记-美国
var marker3=新的google.maps.Marker({
位置:新google.maps.LatLng(40.71435,-74.00597),
地图:地图,
图标:'http://google-maps-icons.googlecode.com/files/kitesurfing.png',
德拉格布尔:是的
});
marker3.setTitle(“纽约”);
//信息窗口
var contentString=$(“#divContentForInfoWindow”).html();
$(“#divContentForInfoWindow”).html(“”);
infowindow3=新建google.maps.InfoWindow({
content:contentString,zIndex:5000//此zIndex属性似乎没有任何作用。
});
google.maps.event.addListener(marker3,'click',函数(){
信息窗口3.打开(地图、标记3);
});
};
该层浮动在google地图上方,因为Z索引设置得更高
你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界
你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界
你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界
你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界
你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界
你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界
这是弹出式内容
这是弹出式内容
这是弹出式内容
这是弹出式内容
这是弹出式内容
这是弹出式内容
这是弹出式内容
这是弹出式内容
这是弹出式内容
这是弹出式内容
这是弹出式内容
这是弹出式内容



使用infowindow.setZIndex(数字)

可以使用替代外部元素来放置在地图上。自定义控件位于地图上方,当您打开信息窗口时,Google maps会检测控件的位置,并自动移动和打开控件下方的信息窗口,因此两者不会重叠。在这种情况下,最好使用它而不是,因为当您拖动或缩放贴图时,覆盖会移动,并且控件始终保持在同一位置

因此,首先必须在html中将映射和控件添加为div-s,然后初始化映射,然后将控件添加到映射中,如下所示:

var control = document.getElementById('control');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(control);

这有多简单;)

实际上,您无法按照您尝试的方式调整z索引。CSS父子关系不允许您使用。基本上,只要地图是一个较低的z索引,然后浮动块,信息窗口永远不能在它上面与此设置。您最好的选择是尝试或尝试通过DOM将您的浮动div添加到地图中,但不知道为什么会被否决。对我有用。这里的完整文档:当您处理地图之外的元素时,这将不起作用。每个定位元素都会设置一个新的堆叠上下文,因此
z-index
在一个有几十个定位元素的环境中不会让您走得很远。最好坚持莱克西的答案。@wortwart我同意,这行不通。lexie的答案在哪里?我用这种方式创建了一个图例,但信息窗口隐藏在图例后面,你知道可能会出现什么问题吗?我使用了几个自定义控件,信息窗口会忽略它们,经常出现在它们下面。这个解决方案不起作用。
var control = document.getElementById('control');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(control);