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

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

  • 相关阅读:
    猫与路由器(还没看)
    ORA-12154: TNS: 无法解析指定的连接标识符(未解决)
    easy-batch demo
    mongodb 创建用户
    docker mongodb
    监听器,过滤器,拦截器
    mysql docker-compose启动异常:Database is uninitialized and password option is not specified
    设计模式-builder模式的价值
    【C++ Template | 04】折叠表达式
    【vim】vim插件教程
  • 原文地址:https://www.cnblogs.com/lizeyan/p/GoogleMaps.html
Copyright © 2020-2023  润新知