カスタムオーバーレイとポリゴンのZインデックスの順序を設定する

Question

Google（https://developers.google.com/maps/documentation/javascript/examples/overlay-simple）が提供するUSGSOverlayの例によく似たカスタムオーバーレイを実装しました。これには、任意の画像を表示するために使用されるdivのZ-インデックスを設定する機能を追加しました。うまく動作します - 私は自分のカスタムオーバーレイの相対的な深度の順序を完全に制御できます。

マップに表示したいポリゴンもあります。もちろん、Polygon.setOptions（）を使用してZインデックスを設定することで、これらの要素の相対的な奥行き順序を制御できます。それもうまくいく。

設計上、カスタムオーバーレイとポリゴンは両方ともオーバーレイレイヤーにあります。異種のタイプのインタリーブを含む、私のポリゴン（P1、P2、...）と私のカスタムオーバーレイ（O1、O2、...）の相対的な奥行き順序を任意に制御したいと思います。たとえば、P1、O1、O2、P2、O3、P3の順序が必要な場合があります。ただし、ポリゴンzインデックスに関係なく、常に30より小さいzインデックスのオーバーレイが表示され、ポリゴンzインデックスに関係なく、すべてのポリゴンの前にzインデックス30以上のオーバーレイが表示されます。

すべての希望が失われていますか？

Answer 1

MapPanesを試すことができます。 MapPanes型のペインは、マップ上の異なるレイヤーの積み上げ順序を指定します。

次のペインが利用可能であり、それらは下から上に積層された順序で列挙される：

• mapPaneが最低ペインで、タイルの上にあります。 DOMイベントを受信しないことがあります。 （ペイン0）。

• overlayLayerには、ポリライン、ポリゴン、グラウンドオーバーレイ、タイルレイヤオーバーレイが含まれています。 DOMイベントを受信しないことがあります。 （ペイン1）。

• overlayShadowにはマーカーシャドウが含まれています。 DOMイベントを受信しないことがあります。 （ペイン2）。 overlayImageには、マーカーの前景画像が含まれています。 （ペイン3）。

• floatShadowに情報ウィンドウの影が含まれています。 overlayImageの上にあり、マーカーが情報ウィンドウの影になることがあります。 （ペイン4）。

• overlayMouseTargetには、マーカーの透明ターゲットなど、DOMマウスイベントを受け取る要素が含まれています。これはfloatShadowの上にあり、情報ウィンドウの影にあるマーカーをクリックできるようにします。 （ペイン5）。

• floatPaneに情報ウィンドウが含まれています。これはすべてのマップオーバーレイです。 （ペイン6）。

このオブジェクトには、オーバーレイがレンダリングされるDOM要素が含まれています。下に「ペイン0」、上に「ペイン6」と記載されています。

また、SO questionを確認してみてください。