谷歌地图信息窗口Z索引
Google Maps InfoWindow Z-Index
InfoWindow是否可以在Z索引高于谷歌地图的元素上弹出?
假设谷歌地图的z索引为零。该元素的z索引为100。单击标记会在与图元相同的区域中显示一个信息窗口。我们如何让这个InfoWindow悬停在元素上而不是它下面?
我曾尝试将InfoWindow的z索引设置为更高的值,但这似乎没有任何作用。
我在下面制作了一个演示来演示这个问题。如有任何帮助,我们将不胜感激!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Infowindow Z-Index Test</title>
<script language="Javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">
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 map;
function mapChoose(coords) {
var current = coords[Math.floor(Math.random() * (coords.length))];
//mapShow(current[0], current[1], current[2], document.getElementById('map'));
mapShow(current[0], current[1], current[2], document.getElementById('map_canvas'));
};
function initialize() {
mapChoose(coords);
}
function mapShow(lat, lng, zoom, div) {
var myOptions = {
'zoom': zoom,
'center': new google.maps.LatLng(lat, lng),
'mapTypeId': google.maps.MapTypeId.SATELLITE,
'disableDefaultUI': true,
'scrollwheel' : false,
'draggable': false
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// markers
// load markers - us
var marker3 = new google.maps.Marker({
position: new google.maps.LatLng(40.71435, -74.00597),
map: map,
icon: 'http://google-maps-icons.googlecode.com/files/kitesurfing.png',
draggable: true
});
marker3.setTitle("New York");
// info windows
var contentString = $("#divContentForInfoWindow").html();
$("#divContentForInfoWindow").html('');
infowindow3 = new google.maps.InfoWindow({
content: contentString, zIndex: 5000 // this ZIndex property doesnt appear to do anything.
});
google.maps.event.addListener(marker3, 'click', function () {
infowindow3.open(map, marker3);
});
};
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<!-- Google canvas element | Z-Index of 0 -->
<div id="map_canvas" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 0;"></div>
<!-- Floating block of text | Z-Index of 100 -->
<div id="FloatingBlock" style='z-index: 100;position: absolute;left: 50px;top:75px;font-size: 16px;width: 525px;text-align: left;color: #111;background-color:#fff;opacity:.80;filter:alpha(opacity=80);'>
<b>This layer is floating above the google map because the Z-Index has been set higher. <br /></b>
Hello world hello world hello world hello world hello world hello world hello world<br />
hello world hello world hello world hello world hello world hello world hello world<br />
Hello world hello world hello world hello world hello world hello world hello world<br />
hello world hello world hello world hello world hello world hello world hello world<br />
Hello world hello world hello world hello world hello world hello world hello world<br />
hello world hello world hello world hello world hello world hello world hello world<br />
<div class="text">
<!-- <input type="button" id="btntest" value="Open Info Window" onclick="showInfoWindow2();" /><input type="button" id="btntest2" value="hide Info Window" onclick="hideInfoWindow2();" />-->
</div>
<div style="clear:both;"></div>
</div>
<!-- / can delete this, not used -->
<!-- everything IN here will appear in the google maps info window -->
<div id="divContentForInfoWindow">
This is popup content. <br />This is popup content. <br />
This is popup content. <br />This is popup content. <br />
This is popup content. <br />This is popup content. <br />
This is popup content. <br />This is popup content. <br />
This is popup content. <br />This is popup content. <br />
This is popup content. <br />This is popup content. <br />
</div>
<br /><br /><br />
<!-- / everything in here will appear in the google maps info window -->
</body>
使用infowindow.setZIndex(数字);
您可以使用自定义控件而不是外部元素来放置在地图上。自定义控件位于地图上方,打开InfoWindow时,Google地图会检测到控件的位置,并自动移动并打开控件下方的InfoWindow,因此两者不会重叠。在这种情况下,最好使用它而不是自定义覆盖,因为当拖动或缩放地图时,覆盖会移动,控件始终保持在同一位置。
因此,首先你必须在html中以div-s的形式添加映射和控件,然后初始化映射,然后将控件添加到映射中,如下所示:
var control = document.getElementById('control');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(control);
这有多简单;)
相关文章:
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- 防止Iframe窗体在新窗口中打开
- 名称输入的索引
- 内部分区字体大小获胜'调整浏览器窗口大小时不会随媒体查询而更改
- 调整窗口大小时,可拖动的对象会出现在容器外部
- 在jQuery中获取表的行索引
- Javascript排序的图像弹出窗口..可以't单独弹出
- 测试索引值是否等于某个数字的倍数
- 窗口大小html css
- 循环遍历数组中的特定索引
- 按照选项卡索引的顺序循环一个jQuery选择
- 弹出窗口出现,然后退出
- 如何通过所选索引(AngularJS)在模态弹出窗口中显示数据
- 谷歌地图信息窗口Z索引
- 将 z 索引添加到窗口
- 在模式窗口中显示页面上单击的值(链接)以及索引值
- 离子弹出窗口中数组的索引更改
- 选项卡索引和 Javascript 弹出窗口
- 不断得到未定义的索引错误,不知道如何声明值在子模态窗口
- 窗口位置仅在索引页上工作