jquery ui map群集器标记不显示

Question

我正在使用jquery ui map,我正在从geoJSON加载标记,然后我想对它们进行聚类,但我可以看到标记,但不能看到聚类。

我的代码如下：

$('#map_tracks').gmap({ 'center': '45.752051,6.295604', 'zoom': 12 }).bind('init', function(ev, map) {
    $('#choose_sentiers').change(function() {
      var selected = $('#choose_sentiers').val();      

      $('#map_tracks').gmap('loadKML', 'sentier', 'http://example.org/media/kml/sentiers_vtt_randos/'+selected+'.kml');

      $.getJSON( "markers.geojson", function( data ) {                
        $.each( data["features"], function( key, val ) {
          var longitude = val["geometry"]["coordinates"][0];
          var latitude = val["geometry"]["coordinates"][1];
          var nom = val["properties"]["NOM"];
          var type = val["properties"]["TYPE"];

          $('#map_tracks').gmap('addMarker', { 
                  'position': new google.maps.LatLng(latitude, longitude)
              }).click(function() {
                  $('#map_tracks').gmap('openInfoWindow', { 'content': nom }, this);
              });

        });

      });


    });
    $('#map_tracks').gmap('set', 'MarkerClusterer', new MarkerClusterer(map, $(this).gmap('get', 'markers')));
  });

当我执行console.log($(this).gmap('get','marks'))时；它是空的，我不明白它为什么会这样。

你有什么主意吗？

谢谢

Answer 1

我已经找到了一个方法来修复它：

var markercluster;
 $('#map_tracks').gmap({ 'center': '45.752051,6.295604', 'zoom': 12 }).bind('init', function(ev, map) {
 $('#choose_tracks').change(function() {
  var selected = $('#choose_tracks').val();      

  if ( selected != 'none' )
  {       
    $("#map_tracks").gmap('clear', 'overlays');

    $('#map_tracks').gmap('loadKML', 'sentier', 'http://mynicesite.com/media/kml/'+selected+'.kml');

    $.getJSON( "http://mynicesite.com/media/geojson/sentiers_poi/"+selected+".geojson").done(function( data ) {
      if ( markercluster != undefined )
      {
        markercluster.clearMarkers();
      }

      $.each( data["features"], function( key, val ) {
        var longitude = val["geometry"]["coordinates"][0];
        var latitude = val["geometry"]["coordinates"][1];
        var nom = val["properties"]["NOM"];
        var type = val["properties"]["TYPE"];

        $('#map_tracks').gmap('addMarker', { 
                  'position': new google.maps.LatLng(latitude, longitude),
          'icon':'http://mynicesite.com/media/kml/'+markersIcons[type]['name']
              }).click(function() {
                  $('#map_tracks').gmap('openInfoWindow', { 'content': nom }, this);
              });    
      });

      markercluster = new MarkerClusterer(map, $('#map_tracks').gmap('get', 'markers'));

      $('#map_tracks').gmap('set', 'MarkerClusterer', markercluster);  
    });

    drawPath(selected);        
  }   
 });    
});