如何强制Google地图标记显示在部分图层上方？

Question

我正在显示一张Google地图，其上方有一个剖面图层。 我无法在截面图层上方显示标记（附加图像中的蓝色图层）。

第1层：谷歌地图 第2层：地图上方的部分 - 隐藏地图 第3层：标记

我尝试使用包含zIndex属性的标记设置，但它不起作用。 我怎样才能使它发挥作用？

HTML：

<div id="wrapper">
        <section id="gMap"></section>
        <section id="gMapOverlay"></section>
        <section id="droppableChest"></section>
 </div> 

JS：

var map;
function initialize() {
    var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);

    map = new google.maps.Map(document.getElementById('gMap'), {
        zoom : 13,
        center : myLatlng
});

var marker = new google.maps.Marker({
        position : myLatlng,
        map : map,
        optimized: false,
        zIndex: 9999
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

您应该在地图DOM容器（MapPanes）中添加所述div gMapOverlay。特别是位于标记下方的那个，就像overlayLayer一样。

要获取对MapPanes的引用，您必须为OverlayView实例并为其创建draw和onAdd方法。将OverlayView添加到地图时会调用后者，因此它很适合您的用例：

var map, overlay;

function initialize() {
    var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);
    map = new google.maps.Map(document.getElementById('gMap'), {
        zoom : 13,
        center : myLatlng
    });

    map.Overlay= new google.maps.OverlayView();

    map.Overlay.draw = function () {};

    map.Overlay.onAdd=function() {
        var gMapOverlay = document.createElement("section");
        gMapOverlay.innerHTML = "new div";
        gMapOverlay.id="gMapOverlay";
        this.getPanes().overlayLayer.appendChild(gMapOverlay);
    };

    var marker=new google.maps.Marker({
        position:myLatlng, 
        optimized: false, 
        map:map
    });

    map.Overlay.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);

这意味着您的初始DOM只有gMap和droppableChest部分。