谷歌地圖API v3集羣標記與信息窗口

Question

我已閱讀文檔，但我的腳本技能不是很好，所以我很努力在我的Google地圖中實現集羣。

我的代碼工作正常 - 取一組位置並將它們繪製到地圖上。不過，我現在在地圖上有幾百個點，所以我需要粗略地將這些分組，以便地圖更清晰。我的代碼是這樣的：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="/scripts/google-maps-marker-cluster.js"></script> 

<script type="text/javascript"> 
    var infowindow = null; 

    $(document).ready(function() { initialize(); }); 

    function initialize() { 
     var centerMap = new google.maps.LatLng(54.5753459, -3.9550781); 
     var myOptions = { 
      zoom: 6, 
      center: centerMap, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
     setMarkers(map, sites); 
     infowindow = new google.maps.InfoWindow({ 
      content: "loading..." 
     }); 
     var markerCluster = new MarkerClusterer(map,sites); 
    } 

    var sites = [  
     ['AAA', 57.340558, -2.324553, 1, '<h2>Organisation AAA</h2><address>The address</address>'], 
     ['ZZZ', 50.827138, -0.139432, 1, '<h2>Organisation ZZZ</h2><address>The address</address>'] 
    ]; 


    function setMarkers(map, markers) { 
     var image = new google.maps.MarkerImage('/css/img/icon.png', 
      new google.maps.Size(16, 16), 
      new google.maps.Point(0,0), 
      new google.maps.Point(0, 32) 
     ); 
     var shadow = new google.maps.MarkerImage('/css/img/shadow.png', 
      new google.maps.Size(37, 14), 
      new google.maps.Point(0,0), 
      new google.maps.Point(0, 32) 
     ); 
     var shape = { 
      coord: [1, 1, 1, 20, 18, 20, 18 , 1], 
      type: 'poly' 
     }; 

     for (var i = 0; i < markers.length; i++) { 
      var sites = markers[i]; 
      var siteLatLng = new google.maps.LatLng(sites[1], sites[2]); 
      var marker = new google.maps.Marker({ 
       position: siteLatLng, 
       map: map, 
       shape: shape, 
       title: sites[0], 
       zIndex: sites[3], 
       html: sites[4] 
      }); 
      var contentString = "Some content"; 

      google.maps.event.addListener(marker, "click", function() { 
       infowindow.setContent(this.html); 
       infowindow.open(map, this); 
      }); 
     } 
    } 
</script> 

<div id="map_canvas"></div> 

任何人都可以告訴我聚類這些標記的最簡單方法嗎？我試過在幾個地方移動var markerCluster = new MarkerClusterer(map);，但沒有任何效果。

感謝您的任何指針...

Answer 1

這是我在Rails項目中做的。這和你的很相似，除了我循環一個Rails變量並將其賦值給javascript來構建標記數組。

這裏最大的區別在於我的標記被限制在我的初始化函數中。

function initialize() { 
    var latlng = new google.maps.LatLng(0, 0); 
    var myOptions = { 
    zoom: 8, 
    center: latlng, 
    scrollwheel: false, 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
    }; 
    var map = new google.maps.Map(document.getElementById("map"), 
     myOptions); 

    var latlnglist = [] 
    var markers = [] 
    var infowindow = new google.maps.InfoWindow({ 
    content: "Loading..." 
    }) 

    <% @map.each do |artwork| %> 
    <% unless artwork.location.blank? %> 
     latlnglist.push(artwork_lat_lng = new google.maps.LatLng (<%= artwork.lat %>, <%= artwork.lng %>)) 
     markers.push(marker = new google.maps.Marker({ 
     position: artwork_lat_lng, 
     title: "<%=raw escape_javascript(artwork.title) %>", 
     html: "<%=raw escape_javascript("#{link_to image_fu(artwork.image, '315x120>', :size => '315x120', :alt => artwork.title), map_url(artwork)} <h4>#{artwork.page_title}</h4>") %>" 
     })) 

     google.maps.event.addListener(marker, 'click', function() { 
     infowindow.close(); 
     infowindow.setContent(this.html); 
     infowindow.open(map, this); 
     }) 
    <% end %> 
    <% end %> 

    var mcOptions = { 
    gridSize: 50, 
    maxZoom: 15 
    } 
    var markerCluster = new MarkerClusterer(map, markers, mcOptions); 

    var bounds = new google.maps.LatLngBounds(); 
    for (var i = 0, len = latlnglist.length; i < len; i++) { 
    bounds.extend(latlnglist[i]); 
    } 
    map.fitBounds(bounds);  
} 
google.maps.event.addDomListener(window, 'load', initialize);