zoukankan      html  css  js  c++  java
  • 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);
              
        });
        
      };
           	
    })();
    

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

  • 相关阅读:
    Git commit 信息标准和丢弃必须要的commit
    Markdown list状态下插入代码
    INIT: vesion 2.88 booting
    I.MX6 support eMMC 5.0
    GitLab non-standard SSH port
    PenMount Touch显示鼠标指针驱动安装
    Android WebView remote debugging
    Android预安装可卸载程序
    jmeter(六)元件的作用域与执行顺序
    jmeter(五)JDBC Request
  • 原文地址:https://www.cnblogs.com/lizeyan/p/GoogleMaps.html
Copyright © 2011-2022 走看看