谷歌地图上的30000个位置

30,000 locations on Google Map

本文关键字：位置 30000个谷歌地图更新时间：2023-09-26

我想用JS在谷歌地图上显示30000个位置。但我的浏览器没有响应。有人能给我一些解决方案吗。我的代码如下：-

    <!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>

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

放大到远处时，可能会将点聚合在一起？我曾经在谷歌图表上遇到过类似的问题。我通过确定一次显示的最大点数并将点聚合在一起来获得该值来解决这个问题。视图是放大后重新绘制的。