ポリラインが正しくありません地図上に複数のポリラインがある場合に発生するクリック

Question

Googleマップに複数のポリラインがあり、それぞれに「クリック」イベントハンドラを追加しています。これらのポリラインはすべてjavascriptコードで追加されます。しかし、マップ上のポリラインをクリックすると、最後に追加されたポリラインのクリックイベントが発生します。これにより、クリックされた行を特定することが困難になります。

ポリラインを作成するコードは次のとおり

$.ajax({ 
       type: "GET", 
       url: "MapData.html", 
       success: function (json) { 
        mapData = JSON.parse(json); 
        var newroad; 
        for (var i = 0; i < mapData.length; i++) { 
         newroad = new google.maps.Polyline({ 
          ID: mapData[i].ID, 
          path: google.maps.geometry.encoding.decodePath(mapData[i].latLngs), 
          strokeColor: 'blue', 
          strokeOpacity: 0.75, 
          strokeWeight: 3 
         }); 

         newroad.setMap(map); 
         google.maps.event.addListener(newroad, 'click', function() { 

          setSelectedRoad(newroad); 
         }); 
        } 
       }, 
       error: function() { 
        alert('Critical Data Failure'); 
       } 
      }); 

データは、サーバから正しくフェッチされ、予想通り、すべてのポリラインは青色で表示されています。 「selectedRoadID」は常に最後のポリラインが追加であることが判明し、その行の色は、他のポリラインがクリックされた場合でも、黒に変わりしかしポリラインがクリックされたときに呼び出される関数は

function setSelectedRoad(road) { 
     road.strokeColor = 'black'; 
     road.setOptions({ strokeColor: 'black', strokeOpacity: 1.0 }); 
     selectedRoadID = road.ID; 
    } 

です。

混乱する部分は、マップ上に新鮮なポリラインを描画し、そのクリックイベントを同じ関数に設定すると、正しく動作するということです。クリックしたポリラインのIDが正しく取得されています。これは任意の数の新しい線を描画し、任意の順序でクリックすると正しく機能します。

Answer 1

私は

newroad.setMap(map); 
    google.maps.event.addListener(newroad, 'click', function() { 

      setSelectedRoad(newroad); 
    }); 

newroad.setMap(map); 
    google.maps.event.addListener(newroad, 'click', function() { 

      setSelectedRoad(this); 
    }); 

に固定し、すべてを変えることがわかりました。

Answer 2

問題は、あなたがループでこれをやっているです：

newroad = new google.maps.Polyline({ ... }); 

google.maps.event.addListener(newroad, 'click', function() { 
    setSelectedRoad(newroad); 
}); 

ですからさんは10回を言わせnewroad再作成。作成するたびに、同じ変数に新しいイベントリスナーを与えます。つまり、同じイベントリスナーを10回オーバーライドします。 10個の別々のイベントリスナーを作成せず、各ポリラインごとに1つ。

ポリラインをクリックすると、最後のバージョンのイベントリスナーのみが実行されます。

代わりに、イベントリスナーをループから切り離す必要があります。あなたはnewroadに別の引数でbindEvent 10回、毎回呼び出す

$.ajax({ 
    type: "GET", 
    url: "MapData.html", 
    success: function (json) { 
     mapData = JSON.parse(json); 
     var newroad; 
     for (var i = 0; i < mapData.length; i++) { 
      newroad = new google.maps.Polyline({ 
       ID: mapData[i].ID, 
       path: google.maps.geometry.encoding.decodePath(mapData[i].latLngs), 
       strokeColor: 'blue', 
       strokeOpacity: 0.75, 
       strokeWeight: 3, 
       map: map 
      }); 

      bindEvent(newroad); 
     } 
    }, 
    error: function() { 
     alert('Critical Data Failure'); 
    } 
}); 

function bindEvent(newroad) { 
    newroad.addListener('click', function() { 
     setSelectedRoad(this); 
    }); 
} 

この方法：このような何か。毎回newroadの値が異なる10個のイベントリスナーを作成します。