下面是我创建叠加层的方法(标准方式)。问题是，当我四处拖动 map 时，叠加层位于缩放栏和其他控件的后面。我希望这些控件位于覆盖层后面。我尝试更改叠加层的 z-index，但这不起作用，因为叠加层的父项的 z-index 较低。如果我更改父项的 z-index，控件将被整个 map 隐藏。因此，更改 z-index 不起作用的原因是因为叠加层和缩放条位于 2 个不同的 div 中，它们本身具有 z-index。
<html>
<head>
<style type="text/css">
#map {
width: 600px;
height: 500px;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
TestOverlay.prototype = new google.maps.OverlayView();
/** @constructor */
function TestOverlay(map) {
this.setMap(map);
}
/**
* onAdd is called when the map's panes are ready and the overlay has been
* added to the map.
*/
TestOverlay.prototype.onAdd = function() {
var div = document.createElement('div');
div.innerHTML = "I want the zoombar to go behind me.";
div.style.backgroundColor = "white";
div.style.position = "relative";
div.style.fontSize = "20px";
// Add the element to the "overlayLayer" pane.
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
};
TestOverlay.prototype.draw = function() {
};
// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
TestOverlay.prototype.onRemove = function() {
};
function init() {
var mapCenter = new google.maps.LatLng(-35.397, 150.644);
map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: mapCenter
});
new TestOverlay(map);
}
google.maps.event.addDomListener(window, 'load', init);
</script>
</head>
<body>
<div id="map"></div>
</body>
如您所见。有一个叠加层，仅此而已，其余部分来自 google maps api。 提前致谢。
所以，最后，非常 hacky 和丑陋，但这是我如何做到的:
<html>
<head>
<style type="text/css">
#map {
width: 600px;
height: 500px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var ol;
TestOverlay.prototype = new google.maps.OverlayView();
/** @constructor */
function TestOverlay(map) {
this.setMap(map);
}
/**
* onAdd is called when the map's panes are ready and the overlay has been
* added to the map.
*/
TestOverlay.prototype.onAdd = function() {
var div = document.createElement('div');
div.id = "dummy";
// Add the element to the "overlayLayer" pane.
var panes = this.getPanes();
panes.overlayMouseTarget.appendChild(div);
};
TestOverlay.prototype.draw = function() {
};
// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
TestOverlay.prototype.onRemove = function() {
};
function init() {
var mapCenter = new google.maps.LatLng(-35.397, 150.644);
map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: mapCenter
});
google.maps.event.addListenerOnce(map, 'idle', function() {
var div = document.createElement('div');
div.id = "overlay";
div.className = "gmnoprint";
div.innerHTML = "Yes, the controls go behind me ;)";
div.style = "background-color:white;z-index:100000000000;position:absolute";
$(".gm-style").append(div);
});
google.maps.event.addListener(map, 'drag', function() {
$("#overlay").css("left", $("#dummy").parent().parent().parent().css("left"))
$("#overlay").css("top", $("#dummy").parent().parent().parent().css("top"))
});
ol = new TestOverlay(map);
}
google.maps.event.addDomListener(window, 'load', init);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
想法是覆盖层与控件处于同一水平，并且在应该覆盖层的位置有一个虚拟覆盖层。当拖动事件被触发时，我得到虚拟 div 的坐标，并将它放在我的覆盖 div 中。就是这样:)。
最佳答案
据我了解，自定义叠加层有 6 层，如下所示
- map 面板
- 叠加层
- 叠加阴影
- 叠加图片
- float 阴影
- 覆盖鼠标目标
- float 面板
不幸的是，他们从未将其设计为允许在控件之上叠加，因为在某些情况下，这会使 map 变得无用。
如果您还没有，请查看包含自定义叠加层的开发者网站。谁知道可能还没有人找到解决方法。
https://developers.google.com/maps/documentation/javascript/customoverlays#hide_show
关于css - 如何使谷歌地图叠加在缩放栏的顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20834720/