2014-07-16 88 views
0

我使用jquery ui地圖,我從geoJSON加載標記,然後我想聚集他們,但我可以看到標記,但不能羣集。jquery ui地圖clusterer標記不顯示

我的代碼如下:

$('#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($(本).gmap( '得到', '標記'));它是空的,我不明白爲什麼它的行爲如此。

你有想法嗎?

感謝

+0

你有沒有想出解決辦法?我也有同樣的問題(從'get'返回的標記數組是空的) – skippr

回答

0

我已經找到一種方法來解決它:

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