Google maps api 3 谷歌地图API v3集群标记与信息窗口

我已经阅读了文档，但我的脚本技能不太好，所以我正在努力在我的谷歌地图中实现集群

我的代码运行良好-获取一组位置并将它们绘制到地图上。然而，我现在在地图上有几百个点，所以我需要粗略地对这些点进行聚类，以便地图更清晰。我的代码如下所示：

<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 infowindow=null；
$（document）.ready（函数（）{initialize（）；}）；
函数初始化（）{
var centerMap=new google.maps.LatLng（54.5753459，-3.9550781）；
变量myOptions={
缩放：6，
中心：中心地图，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
设置标记（地图、地点）；
infowindow=新建google.maps.infowindow({
内容：“正在加载…”
});
var markerCluster=新的MarkerClusterer（地图、站点）；
}
var站点=[
[AAA'，57.340558，-2.324553，1，'组织AAAATH地址'，
[ZZZ'，50.827138，-0.139432，1，'ZZZ地址'
];
函数集合标记（映射、标记）{
var image=new google.maps.MarkerImage（'/css/img/icon.png'，
新谷歌地图大小（16,16），
新google.maps.Point（0,0），
新google.maps.Point（0,32）
);
var shadow=new google.maps.MarkerImage（'/css/img/shadow.png'，
新谷歌地图大小（37,14），
新google.maps.Point（0,0），
新google.maps.Point（0,32）
);
变量形状={
坐标：[1,1,1,20,18,20,18,1]，
类型：“poly”
};
对于（var i=0；i

谁能告诉我最简单的聚类方法？我尝试移动

var markerCluster=newmarkerclusterer（map）在几个地方换行，但没有任何效果

谢谢你的指点…
以下是我在Rails项目中的做法。它与您的非常相似，只是我循环了一个Rails变量并将其分配给javascript以构建标记数组

这里最大的区别是，我的标记的作用域在我的initialize函数中

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

函数初始化（）{
var latlng=新的google.maps.latlng（0,0）；
变量myOptions={
缩放：8，
中心：拉特林，
滚轮：错误，
mapTypeId:google.maps.mapTypeId.TERRAIN
};
var map=new google.maps.map（document.getElementById（“map”），
肌肽）；
var latlnglist=[]
变量标记=[]
var infowindow=new google.maps.infowindow({
内容：“正在加载…”
})
latlnglist.push（artwork\u lat\u lng=new google.maps.LatLng（，）
markers.push（marker=newgoogle.maps.marker（{
职位：artwork_lat_lng，
标题：“，
html:“
}))
google.maps.event.addListener（标记'click'，函数（）{
infowindow.close（）；
setContent（this.html）；
打开（地图，这个）；
})
变量mcOptions={
网格大小：50，
最大缩放：15
}
var markerCluster=新的MarkerClusterer（映射、标记、mcOptions）；
var bounds=new google.maps.LatLngBounds（）；
for（变量i=0，len=latlnglist.length；i