在Google Maps V3中将MapLabel放置在多边形的顶部

Question

我正在尝试将MapLabel放在Google Maps V3中的Polygon顶部.我试图将MapLabel zIndex设置为2,将Polygon zIndex设置为1,没有任何运气.这不是可能的,因为Polygon并不真正遵循zIndex？

我为你们创建了一个jsFiddle来查看:http://jsfiddle.net/7wLWe/1/

解决方案:在maplabel.js变化:

mapPane.appendChild(canvas);

至:

floatPane.appendChild(canvas);

原因是因为floatPane它位于所有地图图层之上(窗格6)

http://code.google.com/apis/maps/documentation/javascript/reference.html#OverlayView

Answer 1

这可能是一个迟到的发现..但希望有人会觉得这很有用.

如果您不想使用floatPane(John的解决方案),因为这将始终位于所有内容之上,并且想要提供自定义zIndex ..编辑maplabel.js.在MapLabel.prototype.onAdd = function(){结尾之前添加以下行

if (canvas.parentNode != null) {
    canvas.parentNode.style.zIndex = style.zIndex;
}

现在你可以zIndex在创建maplabel时通过:

var mapLabel = new MapLabel({
    text: "abc",
    position: center,
    map: map,
    fontSize: 8,
    align: 'left',
    zIndex: 15
});

Answer 2

如果您不想触摸maplabel.js,可以添加此功能来更改z-index标签的父级(尽管如果您有其他canvas元素,则可能需要更改该功能):

//change the z-index of the canvas elements parents to move them above polygon layer
google.maps.event.addListenerOnce(map, 'idle', function(){
//var canvasElements = document.getElementsByTagName('canvas');//plain js to get the elements
var canvasElements = jQuery('canvas'); //jquery for easy cross-browser support
    for(var i=0; i<canvasElements.length; i++){
        canvasElements[i].parentNode.style.zIndex = 9999;
    }

});

Answer 3

很高兴看到您正在使用 MapLabel 实用程序库！

正如您所发现的，MapLabel 位于不同的地图窗格中。zIndex仅在特定范围内受到尊重。