設置Google地圖中多邊形的顯示順序

Question

我需要使用帶有繪圖庫的Google Maps中的多邊形來定義特定區域內的某些區域。

我幾乎已經有了框架，但是我注意到有時多邊形的順序不符合我的預期。

我將第一個多邊形的zIndex屬性設置為999999999，並在繪制其他多邊形時減小了此值，因為第一個區域最小，其他區域的范圍也較小-使用此設置，較小的多邊形仍應可選。

我的問題是，這有時會起作用，但是盡管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方法設置zIndex：

newShape.set('zIndex',zVal);

API會立即自動收到有關屬性更改的通知，並設置多邊形的順序