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可能不会用于这些对象，它只会在绘制对象时很重要。

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

但是当你以你的方式设置zIndex属性时，API将无法实现更改。

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

newShape.set('zIndex',zVal);

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

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

1 个答案: