4

以下のコードを使用して、複数のマーカーと情報ウィンドウを含む地図を表示しました。最後の情報ウィンドウがすべてのマーカーに表示されるという非常に一般的な問題が発生しました。http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/とこれを含むあらゆる種類のソリューションを試しましたhttp：/ /www.robertbolton.com/blog/google-maps-v3-multiple-markers-and-infowindows-in-a-loopが、問題を解決するものはありません。

これが私のコードです：

var infowindow = null;
var geocoder;
var map; 

$(document).ready(function() {
    initialize();
});

function initialize() {

    var myOptions = {
            zoom: 8, 
            mapTypeId: google.maps.MapTypeId.ROADMAP, 
            disableDefaultUI: true, 
            scrollwheel: false 
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    setMarkers(map, people);

    infowindow = new google.maps.InfoWindow({
            content: "loading..."
        });

}

    var people = [
        {"userid":"47","lastname":"lastname1","firstname":"firstname1","address":"Paris, France","phone1":"00000000000","phone2":"","email":"me@me.com"},
        {"userid":"42","lastname":"lastname2","firstname":"firstname2","address":"Versaille, France","phone1":"0","phone2":"0","email":"me@me.com"}
    ];

    function setMarkers(map, people) {

    for (var i = 0; i < people.length; i++) {
         var p = people[i];

        geocoder = new google.maps.Geocoder();

        geocoder.geocode( { 'address': p["address"] }, function(results, status) {

            if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);


                var marker = new google.maps.Marker({
                    position: results[0].geometry.location,
                    map: map,
                    html: p["address"]
                });

                var contentString = "Some content";

                google.maps.event.addListener(marker, "click", function () {
                    infowindow.setContent(this.html);
                    infowindow.open(map, this);
                });


            } else {
                alert("Geocode was not successful for the following reason: " + status);
            }

    });

}   

}
4

1 に答える 1

7

ジオコーディングは非同期リクエストです。したがって、forループ内でジオコーディングを使用する場合、結果を受け取ったときにループはすでに終了しており、i常に1になり、最後の項目を指します。

できること：マーカー作成を2つの関数に分割します。マーカーを作成する2番目の関数を呼び出すループの場合は1：

現在の関数を削除しsetMarkers、次の2つの関数をスクリプトに追加します。

function setMarkers(map,people) {
   for (var i = 0; i < people.length; i++) {
      setMarker(map, people[i])
   }
}

function setMarker(map, people) {     
    var p=people;
    geocoder = new google.maps.Geocoder();

    geocoder.geocode( { 'address': p["address"] }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);

            var marker = new google.maps.Marker({
                position: results[0].geometry.location,
                map: map,
                html: p["address"]
            });

            var contentString = "Some content";

            google.maps.event.addListener(marker, "click", function () {
                infowindow.setContent(this.html);
                infowindow.open(map, this);
            });
        } 
        else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });  
}

スクリプトの残りの部分はそのままである可​​能性があります。

于 2012-08-11T21:47:39.537 に答える