0

各マーカーにバインドされたInfoWindowsでJSONを使用して、Googleマップに複数のマーカーを配置しようとしています。残念ながら、JSONの最後の値であるマーカーが1つだけ表示されます。他のマーカーは表示されず、コミックバルーンスタイルの矢印は情報ウィンドウの後ろに表示されません。これを解決するためにかなり長い間試みましたが、何も機能していないようです。

これはコードです：

var stories = {{story_Json|safe}};

var map;


function loadMarkers(stories){
    for (i=0;i<stories.length;i++) {
        var story = stories[i];
        var point = new google.maps.LatLng(story.latitude, story.longitude);
        var marker = new google.maps.Marker({position: point, map: map});
        var infowindow = new google.maps.InfoWindow({
            content: '<div >'+
                '<div >'+
                '</div>'+
                '<h2 class="firstHeading">'+story.headline+'</h2>'+
                '<div>'+
                '<p>'+story.copy+'</p>'+

                '</div>'+
                '</div>'

        });
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
        });

    }
}


 function mainMap(position)
 {
       // Define the coordinates as a Google Maps LatLng Object
       var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

       // Prepare the map options
       var mapOptions =
      {
                  zoom: 15,
                  center: coords,
                  mapTypeControl: false,
                  navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
                  mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        // Create the map, and place it in the map_canvas div
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

        // Place the initial marker
        var marker = new google.maps.Marker({
                  position: coords,
                  map: map,
                  title: "Your current location!"
        });

        loadMarkers(stories);

    }

これらの問題への洞察は大歓迎です。

4

1 に答える 1

1

InfoWindow は i の最後の値を使用して参照を保持しています (ループが終了したため、JSON の最後の値が表示されます)。これは、ブロック スコープではなく、Javascript の関数スコープに関係しています。

story望ましい結果を得る 1 つの方法は、各情報ウィンドウのストーリーの各値を参照する新しいを導入することです。これは、新しい無名関数スコープで実行できます。

function loadMarkers(stories){
    for (i=0;i<stories.length;i++) {
        var story = stories[i];

        (function(story) {
          var point = new google.maps.LatLng(story.latitude, story.longitude);
          var marker = new google.maps.Marker({position: point, map: map});
          var infowindow = new google.maps.InfoWindow({
            content: '<div >'+
                '<div >'+
                '</div>'+
                '<h2 class="firstHeading">'+story.headline+'</h2>'+
                '<div>'+
                '<p>'+story.copy+'</p>'+

                '</div>'+
                '</div>'

          });
          google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map,this);
          });
        })(story);
    }
}

情報ウィンドウの矢印を忘れてしまいました。ぼやけている、変形しているなど、正しく表示されていませんか? 多分それはCSSの問題です.これらの行を追加すると役立つかもしれません.

#map_canvas label { width: auto; display:inline; }
#map_canvas img { max-width: none; max-height: none; }
于 2012-06-08T16:16:09.423 に答える