Googleマップポリゴン「クリック可能：false」は無効です

Question

GoogleマップAPI-v3を使用しています。マップにポリゴンを追加し、ポリラインを追加します。これらの線は、通常、ポリゴンの領域内に配置されます。これには、次のようになります。

私はpolygone上のクリックイベントを無効：

let mapPolygone = { 
      id: currentPolygone.Id, //currentPolygone is just a wrapper 
      path: path, 
      stroke: { 
       color: currentPolygone.LineColor, 
       weight: currentPolygone.LineWeight 
      }, 
      fill: { 
       color: currentPolygone.FillColor, 
       opacity: currentPolygone.Opacity 
      }, 
      editable: false, 
      draggable: false, 
      geodesic: false, 
      // I disabled the click 
      clickable: false, 
      visible: true, 
      } 

は私がpolyine上のクリックハンドラを登録：

let mapPolyline = { 
    // currentPolyline is also a wrapper 
    id: currentPolyline.Id, 
    path: path, 
    stroke: { 
     color: currentPolyline.LineColor, 
     weight: currentPolyline.LineWeight 
    }, 
    strokeOpacity: 1, 
    editable: false, 
    draggable: false, 
    geodesic: false, 
    clickable: true, 
    visible: true, 
    icons: this.getIcons(currentPolyline), // generates a standard GMap-Arrow 
    events: { 
     //Here goes the click event. Doing stuff on 
     click: (polyline: any) => { 
     this.$scope.polyLineClicked(currentPolyline.Id); 
     } 
    } 
    } 

私はGoogleからの期待します別のthreadからは、ポリゴンがクリックを無視し、ポリラインの下のwhathever要素がクリックを取得するということです。 しかし、これは当てはまりません。 polygone

の上にいるとき、私はまだクリックカーソルを取得し、それはまだクリックを取得します。

ポリライン/ポリゴンの描画順序は、ランダムな順序で発生します。時にはラインがクリック可能（ポリゴンの上にペイントされているとき）ですが、通常はそうではありません。

このようなカスタムオーバーレイやそのようなものを考えずにこの作業を行う方法はありますか？ ここに何か不足していますか？

ありがとうございます！

Answer 1

MWEを準備して、@duncanさんが推奨したのはこのトリックでした。 私はangular-google-mapパッケージを使用しています。このパッケージは、Google Maps API用のラッパーです。

ポリラインとPolygonesは、ディレクティブに渡される：

<ui-gmap-google-map center='map.center' 
        zoom='map.zoom' 
        options="map.options" 
        aria-label="Google map"      
        control="map.control" 
        events="map.events" 
        refresh="refresh"> 
    <!-- Polylines--> 
    <ui-gmap-polyline ng-repeat="p in mapPolylines" 
         path="p.path" 
         stroke="p.stroke" 
         visible="p.visible" 
         geodesic="p.geodesic" 
         fit="true" 
         editable="p.editable" 
         icons="p.icons" 
         draggable="p.draggable" 
         events="p.events"> 
    </ui-gmap-polyline> 

    <!-- Polygones --> 
    <ui-gmap-polygon ng-repeat="p in mapPolygones" 
        path="p.path" 
        stroke="p.stroke" 
        fill="p.fill" 
        visible="p.visible" 
        geodesic="p.geodesic" 
        fit="true" 
        editable="p.editable" 
        draggable="p.draggable" 
        events="p.events"> 
    </ui-gmap-polygon> 
</ui-gmap-google-map> 

私はUI-GMAP-ポリゴンにタグを "クリック可能" 属性を追加逃しました。これをタグに追加すると、すべてが魅力的に機能しました。

clickable="p.clickable" 

どうもありがとうございました。

Answer 2

ポリ*スタックオーダリングでは、the zIndex propertyを使用することもできます。これは、「他のポリスと比較したzIndex」です。 angular-google-mapsパッケージには、the zIndex attributeを設定するオプションもあります。