设置多边形在 Google 个地图中的显示顺序

Question

我需要使用绘图库中 Google 地图中的多边形来定义特定区域内的一些区域。

我的框架基本就绪，但我注意到有时我的多边形顺序与我预期的不一样。

我对我的第一个多边形使用 999999999 的 zIndex 属性并在绘制更多多边形时减小此值，因为第一个区域是最小的，其他区域从这个区域延伸 - 并且此设置较小的多边形应该仍然可以选择。

我的问题是，这有时会起作用，但尽管 zIndex 值较低，但会耗尽它覆盖在我的其他多边形之上的一些更大的更远的区域

谁能看出我哪里出错了，或者是否有其他方法可以做到这一点，因为 zIndex 并不总是适用。

这是一个示例 sahpe 初始化

 google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
                zVal = zVal-1000000;
            if (e.type != google.maps.drawing.OverlayType.MARKER) {
            // Switch back to non-drawing mode after drawing a shape.
            drawingManager.setDrawingMode(null);


            // Add an event listener that selects the newly-drawn shape when the user
            // mouses down on it.
            var newShape = e.overlay;

            //Check to see if the shape has an id if not alert user to pick a zone
            newShape.type = e.type;
            newShape.id=curID;
            newShape.zIndex=zVal;
             $('#'+curID).attr("disabled", true);
            google.maps.event.addListener(newShape, 'click', function() {
            if(this.id =="" || this.id==null){
            alert('no id');
            }
              setSelection(newShape);
            });
            setSelection(newShape);
            clearSelection();
          }
        });

这是一张较小区域为区域 1 的图片，在这种情况下，尽管 zIndex 较高，但无法选择

Answer 1

问题是你如何设置 zIndex:

newShape.zIndex=zVal;

多边形不是 HTMLElements，zIndex 不是 CSS-属性，它只是一个属性告诉 API 多边形应该按什么顺序排列渲染。

多边形将被渲染为 <canvas/> 中的对象，CSS 可能不会用于这些对象，对象何时绘制很重要。

为了能够以正确的顺序绘制多边形，API 需要知道多边形的 zIndex-属性何时发生变化（然后 API 必须重新计算所有多边形的顺序并重新绘制它们）。

但是当你按照你的方式设置zIndex-属性时，API不会实现改变。

解决方法：使用 MVCObject 的 setter 方法设置 zIndex:

newShape.set('zIndex',zVal);

API 现在会自动收到有关属性更改的通知并设置多边形的顺序

设置多边形在 Google 个地图中的显示顺序

Set Display order of polygons in Google Maps

javascript

google-maps

polygon

google-maps-api-3

google-maps-drawing