Google 地图上的 30,000 个位置

Question

我想使用 JS 在 google 地图上显示 30,000 个位置。但是我的浏览器没有响应。谁能建议我一些解决方案。我的代码如下：-

    <!DOCTYPE html>
     <html>
     <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
      .loader {
            border-top: 16px solid blue;
            border-right: 16px solid green;
            border-bottom: 16px solid red;
            border-left: 16px solid pink;
            border-radius: 50%;
            width: 120px;
            height: 120px;
            animation: spin 2s linear infinite;
        }
        @keyframes spin {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
        }
    </style>

    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
    <script src="http://jquery-csv.googlecode.com/git/src/jquery.csv.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=nsddjfhjshfghjsdfgjhfhjfhvf&callback=initMap" async defer></script>


  </head>
  <body>
   <div id="inputs" class="clearfix">
    <input type="file" id="files" name="files[]" multiple />
  </div>

    <div id="map"></div>

    <script>
      var map;
      function initMap() {
      $(".map").hide();
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 28.6139, lng: 77.2090},
          zoom: 5

        });



      }


      $(document).ready(function() {
        $('#files').bind('change', handleFileSelect);
    });

       function handleFileSelect(evt) {
      var files = evt.target.files; // FileList object
      var file = files[0];

      printTable(file);


    }
    function printTable(file) {

      var reader = new FileReader();
      reader.readAsText(file);
      var markers = [];

      reader.onload = function(event){
        var csv = event.target.result;
        var data = $.csv.toArrays(csv);


        var temp;

        for(var row in data) {

          for(var item in data[row]) {

          temp=data[row][item];

          if (!temp.trim() || temp.trim()  == null || temp.trim() =='') {
            console.error("string empty");  
          }
          else
          {

          //console.log(data[row][item]);  
          var array1 = JSON.parse(data[row][item]); 
          markers.push(array1);

          delete this.array1;
        }         
          }
        }
         showMarker(markers);


       };


    }


    function showMarker(mark)
    {

    for(var array1 in mark) {

            new google.maps.Marker({
                position: {lat: mark[array1][1], lng: mark[array1][0]},
                icon: {
                path: google.maps.SymbolPath.CIRCLE,
                scale: 2,
                fillColor: '#F44336',
                strokeColor: '#F44336',
                fillOpacity: 0.8,
                strokeWeight: 0
                },

                map: map,
             });
         }


         $(".map").show();
      }

     </script>



     </body>
     </html>

任何建议都会有所帮助。提前致谢！！

Answer 1

也许在缩小到很远时将点聚合在一起？ Google 图表曾经遇到过类似的问题。我通过确定一次显示的最大点数并将点聚合在一起以获得该值来解决它。视图在缩放时重新绘制。

Google 地图上的 30,000 个位置

30,000 locations on Google Map

javascript

google-maps

location-services