Festlegen der willkürlichen Z-Indexreihenfolge von benutzerdefinierten Overlays und Polygonen

Question

Ich habe ein benutzerdefiniertes Overlay implementiert, das dem USGSOverlay-Beispiel von Google (https://developers.google.com/maps/documentation/javascript/examples/overlay-simple) sehr ähnlich ist. Dazu habe ich die Möglichkeit hinzugefügt, den Z-Index der divs zu setzen, um beliebige Bilder anzuzeigen. Funktioniert gut - ich habe die vollständige Kontrolle über die relative Tiefe der Reihenfolge meiner benutzerdefinierten Overlays.

Ich habe auch verschiedene Polygone, die ich auf meiner Karte anzeigen möchte. Natürlich kann ich die relative Tiefenordnung dieser Elemente steuern, indem ich ihren Z-Index über Polygon.setOptions() setze. Das funktioniert auch gut.

Die benutzerdefinierten Überlagerungen und die Polygone befinden sich beide von Entwurf auf dem OverlayLayer. Ich hätte gerne eine willkürliche Kontrolle über die relative Tiefenordnung meiner Polygone (P1, P2, ...) und meiner benutzerdefinierten Überlagerungen (O1, O2, ...), einschließlich der Verschachtelung verschiedener Typen. Zum Beispiel könnte ich eine Reihenfolge von P1, O1, O2, P2, O3, P3 wünschen. Overlays mit einem Z-Index von weniger als 30 erscheinen jedoch immer hinter allen Polygonen (unabhängig vom Polygon-Z-Index) und Overlays mit einem Z-Index von 30 oder größer erscheinen vor allen Polygonen (unabhängig vom Polygon-Z-Index).

Sind alle Hoffnungen verloren?

Answer 1

Sie können versuchen, die MapPanes zu verwenden. Die Fenster vom Typ MapPanes geben die Stapelreihenfolge für verschiedene Layer auf der Karte an.

folgende Scheiben sind verfügbar und werden in der Reihenfolge aufgelistet, in der sie von unten nach oben gestapelt sind:

• mapPane die niedrigste Scheibe ist und über den Platten ist. Es kann keine DOM-Ereignisse empfangen. (Fenster 0)

• overlayLayer enthält Polylinien, Polygone, Boden-Overlays und Kachel-Layer-Overlays. Es kann keine DOM-Ereignisse empfangen. (Fenster 1)

• overlayShadow enthält die Marker Schatten. Es kann keine DOM-Ereignisse empfangen. (Bereich 2). overlayImage enthält die Vordergrundbilder des Markers. (Fenster 3).

• floatShadow enthält das Infofenster Schatten. Es befindet sich über dem OverlayImage, so dass Markierungen im Schatten des Infofensters sein können. (Fenster 4)

• overlayMouseTarget enthält Elemente, die DOM-Mausereignisse empfangen, z. B. transparente Ziele für Markierungen. Es befindet sich über dem floatShadow, so dass Markierungen im Schatten des Info-Fensters angeklickt werden können. (Bereich 5).

• floatPane enthält das Infofenster. Es sind vor allem Kartenüberlagerungen. (Fenster 6)

Dieses Objekt enthält die DOM-Elemente, in denen Überlagerungen gerendert werden. Sie sind unten mit 'Pane 0' unten und 'Pane 6' oben aufgelistet.

Versuchen Sie auch, diese SO question zu überprüfen, wenn es Ihnen helfen kann.