0

Google Maps API V3の例に従って、地図上に配置しているマーカーをクラスター化しました。私は可能な限り最も簡単な方法を使用しています。MarkerClusterを表示させることができません。対応するコードを間違った領域に配置している可能性がありますが、いくつかのバリエーションを試した後、MarkerClusterを表示できないようです。

誰かが何か洞察を持っていて、私が間違っていることを教えてくれるなら、それは大いにありがたいです。

これはコードです：

    var stories = {{storyJson|safe}};
var geocoder;
var map;

function loadMarkers(stories){
    var markers = [];

    for (i=0;i<stories.length;i++) {
        var story = stories[i];    
        if (story.copy.length > 120) {
                story.copy = story.copy.substring(0, 120) + "...";
            }

        (function(story) {      
            var pinColor = "69f2ff";
                var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=S|" + pinColor,
                    new google.maps.Size(21, 34),
                    new google.maps.Point(0,0),
                    new google.maps.Point(10, 34));
          var point = new google.maps.LatLng(story.latitude, story.longitude);
          var marker = new google.maps.Marker({position: point, map: map, icon: pinImage});
          var infowindow = new google.maps.InfoWindow({
            content: '<div >'+
                '<div >'+
                '</div>'+
                '<h2 class="firstHeading">'+story.headline+'</h2>'+
                '<div>'+
                '<span>'+story.author+'</span><br />'+
                '<span>'+story.city+'</span><br />'+
                '<span>'+story.topic+'</span><br />'+
                '<p>'+story.date+'</p>'+
                '<p>'+story.copy+'</p>'+
                '<p><a href='+story.url+'>Click to read story</a></p>'+
                '</div>'+
                '</div>'

          });

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

          });
            markers.push(marker);

        })(story);

    }
}




 function mainMap(position)
 {
       geocoder = new google.maps.Geocoder();
       // 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);
        var markerCluster = new MarkerClusterer(map, markers);

    }
4

1 に答える 1

0

奇妙に見えることがあります。loadMarkersに入力され、クラスタラーの作成に使用されるmarkersグローバルは1つだけである必要があります。markers

ただし、ループの反復ごとに空になる行var markers = []が内部にあります。function (story)また、markers.push(marker)マーカーが作成された場所と同じブロックにある必要があります。現在、forループの外側にあるため、1つのマーカー（最後のマーカー）のみが追加されます。

最後に、なぜ周りに{}中括弧があるのか​​理解できませんでしたvar markerCluster = new MarkerClusterer(map, markers);。

于 2012-06-25T18:41:54.673 に答える