Googleマップ：ポリゴンとマーカーZ-インデックス

Question

私は多くのマーカー（黄色の円）を持つGoogle Mapを持っており、マーカー上にポリゴンを描画するツールを実装しました。ただし、描画中はポリゴンはマーカ​​の後ろにあります（描画が完了すると、後ろにとどまります）。

Iはマーカーおよび多角形の両方でのZIndexを変更しようとしたが、マーカーはポリゴンに対して他のマーカーに関して示され、されていない方法を変更するように思われます。私も試しました

polygon.setZIndex(google.maps.Marker.MAX_ZINDEX + 1); 

どのように私はポリゴンを前面に持っていくことができますか？

Answer 1

これで問題は解決しませんが、試したことがうまくいかなかった理由が説明されます。

マップAPIは、固定されたZの順にMapPanesとして知られているいくつかの層を使用する：

• 4：floatPane（情報ウィンドウ）
• 3：overlayMouseTarget（マウスイベント）
• 2：markerLayer（マーカ画像）
• 1：overlayLayer（多角形、ポリライン、グラウンドオーバーレイ、タイルレイヤオーバーレイ）
• 0：地図タイル上記mapPane（最低ペイン）

したがって、レイヤー2のマーカー画像は、常にレイヤー1のポリゴンの上にあります。マーカーのz-インデックスを使っているときは、相対的に調整するだけです。それはポリゴンの上のレイヤー内にあるので、何の役にも立ちません。

あなたはこれについて何ができますか？私が考えることができる唯一の解決策は、あなたが望むMapPaneに入れることができるように、あなた自身のOverlayViewをポリゴンまたはマーカーのために作成することです。

マーカーはクリックできますか、それとも単に静止画像ですか？クリック可能でない場合は、mapPaneで直接描画することができます。あなたのポリゴンはそれらの上にあります。逆に、ポリゴンを上位レイヤの1つに描画することもできます（floatShadow）。

問題は、canvas要素またはDOMイメージのいずれかを使用して、自分の描画すべてを行う必要があることです。クリック可能な場合は、マウスのヒットテストも可能です。

はそこに良いOverlayView例がたくさんありませんが、私は自分の1言及します：私はしばらく前に書いた小さなライブラリがpolygonzo.jsファイルがOverlayView実装がありPolyGonzoを、と呼ばれるが。コードは大したことではありません - 私はあまりにも急いでそれを一緒に投げました - しかし、それはあなたにいくつかのアイデアを与えるのを助けるかもしれません。

Answer 2

変更するには、このメソッドの呼び出し：これに

polygon.setZIndex(google.maps.Marker.MAX_ZINDEX + 1); 

：

polygon.setZIndex(4); 

Answer 3

私はこの質問は古いです知っているが、今後のユーザーのために、私は私のアプローチを共有したい：zIndex高いと

シェイプ値の低いものの前に表示されます。この例では、私はポリゴンを使用して他の形状についても同様である午前：マーカーはメソッドsetZIndex(zIndex:number)を持っていることを

var globalZIndex = 1; //Be sure you can access anywhere 
//... Other instructions for creating map, polygon and any else 
polygon.setOptions({ zIndex: globalZIndex++ }); 

は注意してください。私にとって

Answer 4

こんにちはたこのソリューション

ためシンプル

FlowMarkers(new google.maps.LatLng(positionorigin[0], positionorigin[1]), 
           new google.maps.LatLng(positiondestination[0], positiondestination[1]), myObject[i]['flowfluxinformation'][j]['colorFlux'], lineSymbol,j); 


function FlowMarkersdashed(latlngOrgin, latlngDest, ColorFlow, Symbol, indexvar){ 

       var flightPlanCoordinates = [ 
        latlngOrgin, 
        {lat: latlngOrgin.lat() + (indexvar) * 2, lng: latlngOrgin.lng()}, 
//     {lat: -18.142, lng: 178.431}, 
        latlngDest, 
       ]; 
       var line = new google.maps.Polyline({ 
        path: flightPlanCoordinates, 
        strokeOpacity: 0, 
        icons: [{ 
         icon: Symbol, 
//      offset: '100%', 
         offset: '0', 
         repeat: '20px' 

//     repeat: '20px' 
        }], 
        strokeColor: "#"+ColorFlow, 
        geodesic: true, 

//     editable: true, 

        map: map 
       }); 
      } 

フローマーカーを作成し、最後に、これは私の結果であるシンボル

var lineSymbol = { 
       path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, 
       strokeColor: '#181727', 
       fillColor: '#50040B', 

      }; 

      var dashedSymbol = { 
       path: 'M 0,-1 0,1', 
       strokeOpacity: 1, 
       scale: 4 

      }; 

[![function MakeMarker(pinColor){ 
       var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor, 
         new google.maps.Size(21, 34), 
         new google.maps.Point(0,0), 
         new google.maps.Point(10, 34)); 

       return pinImage; 

      }][1]][1] 

FlowMarkersdashed(new google.maps.LatLng(positionorigin[0], positionorigin[1]), 
           new google.maps.LatLng(positiondestination[0], positiondestination[1]), myObject[i]['flowfluxphysique'][j]['colorFlux'], dashedSymbol, j); 

      function FlowMarkersdashed(latlngOrgin, latlngDest, ColorFlow, Symbol, indexvar){ 

       var flightPlanCoordinates = [ 
        latlngOrgin, 
        {lat: latlngOrgin.lat() + (indexvar) * 2, lng: latlngOrgin.lng()}, 
//     {lat: -18.142, lng: 178.431}, 
        latlngDest, 
       ]; 
       var line = new google.maps.Polyline({ 
        path: flightPlanCoordinates, 
        strokeOpacity: 0, 
        icons: [{ 
         icon: Symbol, 
//      offset: '100%', 
         offset: '0', 
         repeat: '20px' 

//     repeat: '20px' 
        }], 
        strokeColor: "#"+ColorFlow, 
        geodesic: true, 

//     editable: true, 

        map: map 
       }); 
      } 

とするために作成