在谷歌地图中设置多边形的显示顺序

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-property 时，API 不会意识到更改。

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

newShape.set('zIndex',zVal);

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