Google Maps Api 多坐标分类标记,在地图上显示海量坐标,并分组显示。

例子实现:在可视的区域内有1000个坐标,他们会按照一定缩放距离自动分类到一个点内,点击该分类点,显示该类所有的坐标。效果如下图:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script src="Js/js_4.js" type="text/javascript"></script>
    <script src="Js/markerclusterer.js" type="text/javascript"></script>
</head>
 <body>
  <div id="map" style="margin: 5px auto;  650px; height: 400px"></div>
  <div style="text-align: center; font-size: large;">
   Random Weather Map
  </div>
 </body>
</html>

JavaScript文件js_4.js代码,注释比较详细

(function() {

  window.onload = function() {
    
    // 创建地图
    var options = {
    zoom: 12,
    center: new google.maps.LatLng(22.50, 114.07),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map'), options);
    google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
    
      // 获取地图分界线
      var bounds = map.getBounds();
      
      // 获取地图的角
      var southWest = bounds.getSouthWest();
      var northEast = bounds.getNorthEast();
      
      // 计算地图从上到下的距离
      var latSpan = northEast.lat() - southWest.lat();
      
      // 计算地图从左到右的距离
      var lngSpan = northEast.lng() - southWest.lng();
      
      // 创建数据保存Marker对象
      var markers = [];
      
      // 创建一个循环
      for (var i = 0; i < 1000; i++) {
        
        //创建随机数
        var lat = southWest.lat() + latSpan * Math.random();
        var lng = southWest.lng() + lngSpan * Math.random();
        var latlng = new google.maps.LatLng(lat, lng);
        
        // 创建Marker,注意它没有添加到地图上面
        var marker = new google.maps.Marker({
          position: latlng
        });

        // 将Marker添加到数组中
        markers.push(marker);
       
      }

      //创建一个MarkerClusterer对象,将marker数组¦对象传递给它
      var markerclusterer = new MarkerClusterer(map, markers);
          
    });
    
  };
       	
})();

希望对大家有点帮助,呵呵。

原文地址:https://www.cnblogs.com/lizeyan/p/GoogleMaps.html