1

コードは次のように非常に単純です。

var populateGoogleMap = function (points) {
    for (i = points.length - 1; i >= 0; i--) {
        var marker = new google.maps.Marker({
            map: map,
            draggable: true,
            animation: google.maps.Animation.DROP,
            position: new google.maps.LatLng(point.target.x, point.target.y)
        });
        google.maps.event.addListener(marker, 'click', function (e) {
            toggleBounce(marker);
        });
        nodes[i].marker = marker;
    }
};

markerintoggleBounce(marker)は常に最後に作成されることmarkerがわかります。この問題について少し考えてみたところ、関数を変更することで解決策が見つかりました。関数内のループを削除し、他の場所でループを使用してこの関数を複数回呼び出しました。だから基本的に今はなるfor (i = 0; i < points.length; i++) { populateGoogleMap(point); }。

この動作は Google Maps API が意図したものですか? 変数は現在のコンテキストの変数を参照する必要があるため、これは多くの人を混乱させる可能性があると思います。

4

1 に答える 1

2

これは Google マップに限ったことではありません。イベント リスナー関数を X 回作成しました。

google.maps.event.addListener(marker, 'click', function (e) {
    toggleBounce(marker);
});

ループが終了すると、 の値はループでmarker作成された最後の値になります。実際に行ったことは、マーカー クリック イベント リスナーを X 回再定義することだけです。

それを説明する別の方法。ループはなく、次のように複数のマーカーを作成していたとします。

        var marker = new google.maps.Marker({
            map: map,
            draggable: true,
            animation: google.maps.Animation.DROP,
            position: new google.maps.LatLng(point.target.x, point.target.y)
        });
        google.maps.event.addListener(marker, 'click', function (e) {
            toggleBounce(marker);
        });

        var marker = new google.maps.Marker({
            map: map,
            draggable: true,
            animation: google.maps.Animation.DROP,
            position: new google.maps.LatLng(point.target.x, point.target.y)
        });
        google.maps.event.addListener(marker, 'click', function (e) {
            toggleBounce(marker);
        });

(変数名は同じですが) 2 つのマーカーを作成できましたが、イベント リスナー関数を 1 つ作成しただけで、それらの 2 つのマーカーのうちの 2 つ目に対してのみ機能します。

代わりにあなたがした場合：

        var marker1 = new google.maps.Marker({
            map: map,
            draggable: true,
            animation: google.maps.Animation.DROP,
            position: new google.maps.LatLng(point.target.x, point.target.y)
        });
        google.maps.event.addListener(marker1, 'click', function (e) {
            toggleBounce(marker1);
        });

        var marker2 = new google.maps.Marker({
            map: map,
            draggable: true,
            animation: google.maps.Animation.DROP,
            position: new google.maps.LatLng(point.target.x, point.target.y)
        });
        google.maps.event.addListener(marker2, 'click', function (e) {
            toggleBounce(marker2);
        });

次に、2 つの異なるマーカーに対して、2 つの異なるイベント リスナー関数を取得します。したがって、これをループ外の独自の関数に移動し、各マーカーをその関数に引数として渡すことで、それぞれに固有のイベント リスナーを作成します。わかる？

于 2013-05-24T09:04:38.450 に答える