-1

MarkerCluster機能をマーカー付きの既存のGoogleマップに追加しようとしています。API命令を使用して、開始する最も簡単な例を追加しようとしました。残念ながら、マップが消えてしまいます。

私はmarkerClsuter変数を間違った場所に配置していると思いますが、確信が持てません。私のJavaScriptは良くないので、少し混乱します。

長いコードについてお詫びしますが、できるだけ多くのコンテキストを提供したいと思いました。

どんな洞察もありがたいです。

function mainGeo()
{
     if (navigator.geolocation) 
        {
          navigator.geolocation.getCurrentPosition( mainMap, error, {maximumAge: 30000, timeout: 10000, enableHighAccuracy: true} );
    }
    else
    {
          alert("Sorry, but it looks like your browser does not support geolocation.");
    }
}


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

var markers = [];

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

        (function(story) {
            var pinColor = "69f2ff";
                var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + 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>'+
                '<p>'+story.author+'</p>'+
                '<p>'+story.copy+'</p>'+

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

          });
          google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map,this);
          });
        })(story);
    }
var markerCluster = new MarkerClusterer(map, markers);
}



 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);

    }


  function codeAddress() {
    var address = document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }
4

2 に答える 2

0

MarkerClusterer を使用した「単純な」例の作業コピーには、提供しなかったデータが含まれていないことは明らかです。

于 2012-06-18T21:36:47.080 に答える
0

マップが表示されなくなる場合は、どこかで構文エラーが発生している可能性があります。コンマやセミコロンが抜けている可能性があります。マーカーを編集するときにマーカー コードが正しくない場合、通常、マップは読み込まれますが、マーカーは読み込まれません。

また、マーカーに新しいコードを追加した場合は、マーカー クラスターとマーカー マネージャーでもコア変数を変更する必要があることに注意してください。

たとえば、ラベル付きのマーカーを持つ新しい関数を作成することにしたとき、マーカー マネージャー用の新しい関数も追加しない限り、マーカー マネージャーは機能しませんでした。

于 2012-06-20T02:30:25.247 に答える