4

マーカーを作成するための私のコード：

for (var marker in markers) {
    var posMarker = new google.maps.Marker({
        position: new google.maps.LatLng(markers[marker].lat, markers[marker].lng),
        map: map,
        visible: markers[marker].visible
    });     
};

私のマーカーオブジェクト：

var markers = {
        "London": {"lat": -83.68088192646843, "lng": -125.270751953125, "type": "town", "visible": false},
        "Paris": {"lat": -58.1548020417031, "lng": -21.318115234375, "type": "town", "visible": false},
};

次のようなチェックボックスでマーカーを切り替えられるようにしようとしています。

$('#toggle').change(function() {
    for (var marker in markers) {
        posMarker.setVisible(true);
    };
});

しかし、配列の最後のマーカーのみが表示されます。それらすべてを表示するにはどうすればよいですか？

ありがとう。

4

1 に答える 1

6

posMarkerさて、 Google マップのマーカーを配置する一時変数として使用されていることがわかります。for ループが進行するにつれて、posMarker配置された最新のマーカーへの参照が「更新」されます。そのため、最後のマーカーのみが表示されています。

「消費」されたものを含め、配置されている Google マップ マーカーへのすべての参照を追跡する必要があります。私のアプローチでは、オブジェクトによく似てmarkersいますが、Google マップ マーカーへの参照を保持するオブジェクトを使用します。単純なインデックス付き配列 (posMarkers[]) を使用することもできます。それはあなた次第です。

Demoを参照してください。簡単にするために LatLngs が変更されていることに注意してください (カスタム座標系があるように見えます)。

また、私はこの変更を行っていませんが、オブジェクトの記述方法から、markerinを呼び出す方が理にかなっている可能性があることに気付きました。読みやすくなりますが、実行には影響しません。markerscitymarkers

最後に、for ループブロックの末尾にあるセミコロンは不要です。オブジェクトの後の末尾のコンマには注意してParisください (リストの残りを消去しただけだと思います)。この場合は問題ではありませんでしたが、これらの末尾のコンマが見つけにくいバグの原因になる場合もあります。

function initialize() {
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    var markers = {
        "London": { "lat": 0, "lng": 0, "type": "town", "visible": false },
        "Paris": { "lat": 10, "lng": 10, "type": "town", "visible": false }
    };

    var posMarkers = {};

    for (var marker in markers) {
        posMarkers[marker] = new google.maps.Marker({
            position: new google.maps.LatLng(markers[marker].lat, markers[marker].lng),
            map: map,
            visible: markers[marker].visible
        });
    }

    $('#toggle').change(function () {
        for (var marker in markers) {
            if (posMarkers[marker].getVisible()) {
                posMarkers[marker].setVisible(false);
            }
            else {
                posMarkers[marker].setVisible(true);
            }
        }
    });
}
于 2012-06-30T00:05:13.333 に答える