Javascript 谷歌地图标记与angularjs的大数据

我正在构建一个小部件，用户可以上传一个excel文件，并在谷歌地图中标记位置

下面的代码可以工作，但当我读取一个包含10k数据量的大型excel文件时，浏览器会卡住。我使用for循环并添加一些超时来从googleapi获取数据

我传递城市名称，得到经纬度并在地图上标出。 有没有更好的方法可以实现

代码如下：

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();
    };

}

函数googlemapsini（widId、$scope、$http、$rootScope、$mdDialog）{
$scope.finish=函数（）{
var objIndex=getRootObjectById（widId，$rootScope.dashboard.widgets）；
$mdDialog.hide（）；
document.getElementById（'map'）.innerHTML=“”；
//excel数据
var array=JSON.parse（$rootScope.JSON_string）；
$scope.locationData=[]；
//把它分成小块
var k，j，temparray，chunk=8；
对于（k=0，j=array.length；k稍微提高性能的一种方法是：不向地图中一次添加一个标记，只需单独创建标记数组，然后立即将它们全部添加到地图中。以下是示例代码：

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);

var-markersData=[]；
对于（var i=0；i

顺便说一句，我使用了“gmaps.js”，这简化了谷歌地图的编码，但您不一定需要它。一般的想法是避免在循环中一个接一个地向地图添加标记。
嘿，如果我的答案对您有所帮助，您介意将其标记为已接受的答案吗？