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地图上的30,000个地点

1 个答案: