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以构建markers数组之外，它与你的非常相似。

这里最大的区别是我的标记在我的初始化函数中被限定。

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

Google使用信息窗口映射API v3群集标记

1 个答案: