在Google Maps V3中，将地图标签放在多边形上方

Question

我正在尝试将一个MapLabel放置在Google Maps V3中的一个多边形上方。我已经试图将MapLabel的zIndex设置为2，多边形的zIndex设置为1，但没有成功。这不可能吗？因为多边形并不真正遵循zIndex?

我已经为大家创建了一个jsFiddle来检查: http://jsfiddle.net/7wLWe/1/

解决方法: 在maplabel.js文件中更改:

mapPane.appendChild(canvas);

收件人：

floatPane.appendChild(canvas);

之所以这样是因为floatPane在所有地图图层（pane 6）的上方。

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

- John

---

你应该将你的解决方案发布为答案，并接受它，以帮助未来的其他人。 - duncan

如果您使用可拖动或可编辑功能，请改用markerLayer而不是floatPane。 - hammurabi

Answer 1

这可能是一个晚发现..但希望有人会发现这个有用。

如果你不想使用floatPane（John的解决方案）因为它会一直在最上层，而是想给一个自定义的zIndex，请编辑 maplabel.js。在 MapLabel.prototype.onAdd = function() {结束前添加以下行：

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

现在您可以在创建maplabel时传递zIndex：

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

- Avishek

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;
    }

});

- brouxhaha

---

我无法让它正常工作。parentNode样式索引更改在检查器中显示正确，但标签仍然隐藏。 - Dom Vinyard

Answer 3

我使用CodePen示例和gmaps-labels类创建了这个草图。它基于上面的问题中的fiddle，并添加了LabelOverlay类的使用。该类需要一个new google.maps.LatLng，以及围绕标签点居中的框的维度（如果标签会溢出此框，则隐藏它），还有一些CSS。以下是代码框架，请查看CodePen中的演示。

var MIN_BOX_H = 0.0346, 
    MIN_BOX_W = 0.121,
    MAX_BOX_H = 0.001, 
    MAX_BOX_W = 0.03;



var overlay1 = new LabelOverlay({
    ll      : myLatlng,

    minBoxH     : MIN_BOX_H,
    minBoxW     : MIN_BOX_W,

    maxBoxH     : MAX_BOX_H,
    maxBoxW     : MAX_BOX_W,

   ...

   label        : "I want on top",
   map      : map
});

- Alan David Garcia

Answer 4

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

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

- Chris Broadfoot

Answer 5

var maplabel = new MapLabel....  
$(maplabel.getPanes().mapPane).css('z-index', maplabel.zIndex);

使用jQuery让我很轻松地完成了任务，而且不需要修改maplabel.js文件。 我还找到了另一种解决方案。

$(maplabel.getPanes().mapPane).addClass('map-pane');

然后在样式表中定义z-index

- Wanfactory