谷歌地圖標記與angularjs大數據

Question

我正在建立一個小部件，用戶可以上傳一個Excel文件，並在谷歌地圖中標記的地方。

下面的代碼有效，但是當我讀取一個具有10k數據量的大型excel文件時，問題就出現了，瀏覽器卡住了。我正在使用for循環並添加一些超時從Google API獲取數據。

我通過城市名稱並獲取經度和緯度並在地圖上標記它。 有沒有更好的方法可以實施？

下面是代碼：

function googleMapsInit(widId, $scope, $http, $rootScope, $mdDialog) { 
     $scope.finish = function() { 
     var objIndex = getRootObjectById(widId, $rootScope.dashboard.widgets); 
     $mdDialog.hide(); 
     document.getElementById('map').innerHTML = ""; 
     //excel data 
     var array = JSON.parse($rootScope.json_string); 
     $scope.locationData = []; 
     //dividing it to chunks 
     var k,j,temparray,chunk = 8; 
     for (k=0,j=array.length; k<j; k+=chunk) { 
      temparray = array.slice(k,k+chunk); 
      var i; 
      //getting the longitude and latitude from the google geo api 
      for(i=0;i < temparray.length ; i++){ 
       Geocode(temparray[i].PLACE_OF_ACCIDENT); 
      }  
     }  
     //sometimes data gets delayed 
     setTimeout(function(){ googleMap(); }, 5000);     

    }; 
    function Geocode(address) { 
     var obj = {}; 
     var geocoder = new google.maps.Geocoder(); 
     geocoder.geocode({'address': address}, function(results, status) { 
        if (status === google.maps.GeocoderStatus.OK) { 
         obj = { 
          lat : results[0].geometry.location.G, 
          lng : results[0].geometry.location.K 
         }; 
         setTimeout(function(){ $scope.locationData.push(obj); }, 100); 
        } 
        else if (status === google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {  
         setTimeout(function() { 
         Geocode(address); 
         }, 100); 
        } 
        else if (status === google.maps.GeocoderStatus.ZERO_LIMIT) {  
         setTimeout(function() { 
         Geocode(address); 
         }, 100); 
        } 
        else {      
        }  
     });  
    } 
    function googleMap() { 
     var dataStore = $scope.locationData; 
     var array = JSON.parse($rootScope.json_string); 
     var map = new google.maps.Map(document.getElementById('map'),{ 
      center: {lat: 7.85, lng: 80.65}, 
      zoom: 6 }); 
     var pinImageGreen = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/icons/green-dot.png"); 
     var pinImageBlue = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/icons/blue-dot.png"); 
     var marker = []; 
     var k; 
     for(k=0; k < array.length; k++){ 
        marker[k] = new google.maps.Marker({ 
        position: {lat: $scope.locationData[k].lat, lng: $scope.locationData[k].lng}, 
        map: map, 
        title: array[k].PLACE_OF_ACCIDENT, 
        icon: pinImageGreen, 
        VEHICLE_TYPE: array[k].VEHICLE_TYPE, 
        VEHICLE_USAGE: array[k].VEHICLE_USAGE, 
        VEHICLE_CLASS: array[k].VEHICLE_CLASS 
        }); 
        marker[k].addListener('click', function(data) { 
         var j; 
         for(j=0;j<array.length;j++){ 

          if(($scope.locationData[j].lat == data.latLng.G) && ($scope.locationData[j].lng == data.latLng.K)){         
           document.getElementById("details").innerHTML = 
           array[j].PLACE_OF_ACCIDENT + "</br>" + 
           array[j].VEHICLE_TYPE + "</br>" + 
           array[j].VEHICLE_USAGE + "</br>" + 
           array[j].VEHICLE_CLASS + "</br>" ; 
          } 
         }  
        });  
      } 
    } 

    $scope.cancel = function() { 
     $mdDialog.hide(); 
    }; 

} 

Answer 1

一來略微提高性能的方法是這樣的：不是一次添加標記到地圖之一，直接創建標記數組，然後將它們添加一次全部到地圖。下面是一個示例代碼：

var markersData = []; 
     for (var i = 0; i < myArray.length; i++) { 
      var item = scope.myArray[i]; 
      if (item.lat != undefined && item.lon != undefined) { 
       var icon = 'icon.png'; 
       markersData.push({ 
        lat: item.lat, 
        lng: item.lon, 
        title: 'xyz' 
       }); 
      } 
     } 

     map.addMarkers(markersData); 

通過我曾用「gmaps.js」這一從而簡化編碼谷歌地圖的方式，但你不一定需要它。總的想法是避免在循環內的地圖上逐個添加標記。