Google地圖上的30,000個地點

-1

我想在使用JS的谷歌地圖上顯示30,000個地點。但我的瀏覽器沒有響應。任何人都可以向我推薦一些解我的代碼如下： -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>

任何建議將有所幫助。在此先感謝！

來源

2016-04-29 niks290192

您是否考慮過根據縮放級別對標記進行分組，然後僅顯示包含在放大區域中的子集？例如：https：//googlemaps.github.io/js-marker-clusterer/examples/simple_example.html – pawel

帕維爾我不想被分組我希望它是所有的標記是可見的所以我可以跟蹤密度在地圖上。 – niks290192

也許聚集在一起的時候放大了遠嗎？我曾經與Google Charts有過類似的問題。我通過確定一次顯示的最大點數並將點彙總在一起以獲得該值來解決此問題。該視圖在縮放時重新繪製。

來源

2016-04-29 13:26:10

Google地圖上的30,000個地點

回答

相關問題