web-dev-qa-db-ja.com

Googleマップ：各ポリゴンにクリックリスナーを追加する

Webアプリケーションに取り組んでいます。配列からポリゴンを追加するGoogleマップがあります。その配列をループして、ポリゴンをマップに追加します。ポリゴンのクリックにイベントリスナーを追加して、ポリゴンの位置を警告する必要もあります

これは私がやっていることです

map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);
//Loop on the polygonArray
for (var i = 0; i < polygonArray.length; i++) {
    //Add the polygon
    var p = new google.maps.Polygon({
        paths: polygonArray[i],
        strokeWeight: 0,
        fillColor: '#FF0000',
        fillOpacity: 0.6,
        indexID: i
    });
    p.setMap(map);

    //Add the click listener
    google.maps.event.addListener(p, 'click', function (event) {
        //alert the index of the polygon
        alert(p.indexID);
    });
}

問題

ポリゴンはすべて正しく描画されています。ただし、問題は、ポリゴンをクリックしようとすると、常に最後のインデックスが表示されることです。追加された最後のポリゴンをクリックするだけのようです。新しいリスナーを追加すると、古いリスナーが上書きされると思います。正しいインデックスを警告するために、追加された各ポリゴンのリスナーをどのように追加できますか？

ありがとう

javascriptgoogle-mapsasp.net-mvc-4polygon
17
Youssef

これは正常な動作です。私が考えることができる2つの解決策があります：

1）コンテキストからポリゴンを見つけることができると確信しています（テストしていません）。

google.maps.event.addListener(polygon, 'click', function (event) {
  alert(this.indexID);
});

2） closures を使用することもできます。

var addListenersOnPolygon = function(polygon) {
  google.maps.event.addListener(polygon, 'click', function (event) {
    alert(polygon.indexID);
  });  
}

map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);
//Loop on the polygonArray
for (var i = 0; i < polygonArray.length; i++) {
    //Add the polygon
    var p = new google.maps.Polygon({
        paths: polygonArray[i],
        strokeWeight: 0,
        fillColor: '#FF0000',
        fillOpacity: 0.6,
        indexID: i
    });
    p.setMap(map);
    addListenersOnPolygon(p);
}
40
SuperSkunk

コードブロックをforループ内に移動します。

//Add the click listener
    google.maps.event.addListener(p, 'click', function (event) {
        //alert the index of the polygon
        alert(p.indexID);
    });

OR

これをforループに追加し、

p.addListener('click', clickSelection);

そしてこれを行う

function clickSelection(){
alert("Clicked");
}
0
Abhi