仅在地图中获得一些标记
Posted
技术标签:
【中文标题】仅在地图中获得一些标记【英文标题】：Only getting a few markers in the map 【发布时间】：2018-07-26 00:21:21 【问题描述】：我对 angularJS 非常陌生，仍在探索。我创建了一张地图并在其中显示了大约 1500 个标记，但是当我加载时只有 11 个标记可见。我从 XML 文件中获取邮政编码并使用地理编码我是将它们转换为 LatLng 并在地图中显示。任何人都可以提出任何解决方案。
提前致谢。
//Angular App Module and Controller
var mapApp = angular.module('mapApp', []);
// app.directive("importSheetJs", [SheetJSImportDirective]);
mapApp.factory('mySHaredService', function ($rootScope)
var mySHaredService = ;
mySHaredService.message = '';
mySHaredService.prepForBroadcast = function (msg)
this.message = msg;
this.broadcastItem();
;
return mySHaredService;
);
mapApp.controller('MapController', function ($scope, $timeout, $window, $rootScope, mySHaredService)
//Parsing data from XML
$rootScope.zipArray = [];
var url = "location.xlsx";
var oReq = new XMLHttpRequest();
oReq.open("GET", url, true);
oReq.responseType = "arraybuffer";
$rootScope.LatLongList = [
"latitudeValue": "",
"longitudeValue": ""
];
oReq.onload = function (e)
var arraybuffer = oReq.response;
var data = new Uint8Array(arraybuffer);
var arr = new Array();
for (var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
var bstr = arr.join("");
var workbook = XLSX.read(bstr, type: "binary" );
var first_sheet_name = workbook.SheetNames[0];
var address_of_cell = "K1";
var worksheet = workbook.Sheets[first_sheet_name];
data = JSON.stringify(XLSX.utils.sheet_to_json(worksheet));
console.log("Messege data" + data);
var finalData = JSON.parse(data);
for (var i = 0; i <= finalData.length; i++)
// console.log("Zip code is " + finalData[i].Zip);
$rootScope.zipArray.push(finalData[i].ZIP);
console.log("Zip code inside zip array is " + $rootScope.zipArray[i]);
setTimeout(function ()
$scope.$apply(function ()
)
, 17770);
$timeout(function()
console.log("Zip data from excel sheet" + $rootScope.zipArray)
var geocoder = new google.maps.Geocoder();
for (var i = 15; i <= $rootScope.zipArray.length; i++)
var address = $rootScope.zipArray[i];
geocoder.geocode( 'address': address , function (results, status)
if (status == google.maps.GeocoderStatus.OK)
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
$rootScope.LatLongList.push(
"latitudeValue": latitude,
"longitudeValue": longitude
);
);
// setTimeout(function ()
// $scope.$apply(function ()
// )
// , 30000);
$timeout(function ()
console.log("Latitude value " + $rootScope.LatLongList[1].latitudeValue)
var mapOptions =
zoom: 11,
center: new google.maps.LatLng(33.6496252, -117.9190418),
mapTypeId: google.maps.MapTypeId.ROADMAP
$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
var circle = new google.maps.Circle(
center: new google.maps.LatLng(33.6496252, -117.9190418),
map: $scope.map,
radius: 10000, // IN METERS.
fillColor: '#FF6600',
fillOpacity: 0.3,
strokeColor: "#FFF",
strokeWeight: 0 // DON'T SHOW CIRCLE BORDER.
);
var bounds = circle.getBounds();
$scope.markers = [];
$rootScope.selectedAd = "";
var selectedLocation = [ "lat": 0, "long": 0 ];
var infoWindow = new google.maps.InfoWindow();
var createMarker = function (info)
var marker = new google.maps.Marker(
map: $scope.map,
position: new google.maps.LatLng(info.latitudeValue, info.longitudeValue),
title: ""
);
marker.content = '<div class="infoWindowContent">' + '<br />' + info.latitudeValue + ' E,' + info.longitudeValue + ' N, </div>';
google.maps.event.addListener(marker, 'click', function ()
infoWindow.setContent('<h2>' + marker.title + '</h2>' +
marker.content);
infoWindow.open($scope.map, marker);
selectedLocation[0].lat = marker.getPosition().lat();
selectedLocation[0].long = marker.getPosition().lng();
console.log("Latitude is " + selectedLocation[0].lat + "Longitude is " + selectedLocation[0].long);
var geocoder = new google.maps.Geocoder();
geocoder.geocode(
latLng: marker.getPosition()
, $scope.selectedLoc = function (responses)
if (responses && responses.length > 0)
// alert(responses[0].formatted_address);
$rootScope.selectedAd = responses[0].formatted_address;
setTimeout(function ()
$scope.$apply(function ()
$rootScope.selectedAd = responses[0].formatted_address;
)
, 1000);
$timeout(function ()
$rootScope.selectedAd = responses[0].formatted_address;
$scope.handleClick = function (msg)
mySHaredService.prepForBroadcast($rootScope.selectedAd);
$scope.$on('handleBroadcast', function ()
$scope.message = $rootScope.selectedAd;
)
, 2000);
else
);
);
$scope.markers.push(marker);
setTimeout(function ()
, 3000);
$timeout(function ()
for (i = 1; i < $rootScope.LatLongList.length; i++)
console.log(bounds.contains(new google.maps.LatLng($rootScope.LatLongList[i].latitudeValue, $rootScope.LatLongList[i].longitudeValue)));
// if (bounds.contains(new google.maps.LatLng($rootScope.LatLongList[i].latitudeValue, $rootScope.LatLongList[i].longitudeValue)))
createMarker($rootScope.LatLongList[i]);
console.log("The value of i is " + i);
//
, 4000);
$scope.openInfoWindow = function (e, selectedMarker)
var data = $rootScope.selectedAd
this.broadcastItem();
window.location = "valuePage.html";
, 4000);
, 2000);
oReq.send();
);
mapApp.controller("viewApp", function ($scope, $rootScope, mySHaredService, $timeout)
// $scope.selectedAd = Products.FirstName;
// $scope.selectedAd = Products.FirstName;
setTimeout(function ()
$scope.$on('handleBroadcast', function ()
$scope.message = mySHaredService.message;
);
, 3000);
$timeout(function ()
$scope.$on('handleBroadcast', function ()
$scope.message = mySHaredService.message;
);
, 4000);
);
【问题讨论】：
仅使用邮政编码而没有任何其他地址详细信息过于含糊，可能不会返回结果。 Best Practices When Geocoding Addresses：“通常，在对完整地址进行地理编码时使用 Google Maps Geocoding API（例如，“48 Pirrama Rd, Pyrmont, NSW, Australia”）。在对模糊（不完整）地址进行地理编码时使用 Places API Place Autocomplete 服务或适用于对延迟敏感的应用程序，例如响应用户输入时。” 刚刚发现我的地理编码状态出现 OVER_QUERY_LIMIT 错误，有什么解决办法吗？ 看看这个答案：***.com/a/43857218/5140781 【参考方案1】：这是因为您每秒发送的请求过多。
除了每日配额限制外，地理编码服务的速率限制为 50 QPS（每秒查询数），计算为客户端和服务器端查询的总和。
Optimizing Quota Usage When Geocoding 有很多关于如何解决这一问题的策略。
在您的情况下，我建议为您发出的每个请求设置一个随机间隔，这样它们就会分散开来，您可以避免超过每秒 50 个请求的限制。
我已经修改了您提出请求的代码示例部分。
mapApp.controller('MapController', function ($scope, $timeout, $window, $rootScope, mySHaredService)
//Parsing data from XML
$rootScope.zipArray = [];
var url = "location.xlsx";
var randomTime = Math.round(Math.random()*(3000-500))+500;
var geocodeRequest = setTimeout(function()
var oReq = new XMLHttpRequest();
oReq.open("GET", url, true);
oReq.responseType = "arraybuffer";
$rootScope.LatLongList = [
"latitudeValue": "",
"longitudeValue": ""
];
oReq.onload = function (e)
var arraybuffer = oReq.response;
var data = new Uint8Array(arraybuffer);
var arr = new Array();
for (var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
var bstr = arr.join("");
var workbook = XLSX.read(bstr, type: "binary" );
var first_sheet_name = workbook.SheetNames[0];
var address_of_cell = "K1";
var worksheet = workbook.Sheets[first_sheet_name];
data = JSON.stringify(XLSX.utils.sheet_to_json(worksheet));
console.log("Messege data" + data);
var finalData = JSON.parse(data);
for (var i = 0; i <= finalData.length; i++)
// console.log("Zip code is " + finalData[i].Zip);
$rootScope.zipArray.push(finalData[i].ZIP);
console.log("Zip code inside zip array is " + $rootScope.zipArray[i]);
setTimeout(function ()
$scope.$apply(function ()
)
, 17770);
, randomTime);
【讨论】：
以上是关于仅在地图中获得一些标记的主要内容，如果未能解决你的问题，请参考以下文章
iOS开发学习之MapKit - 获得在MapView（地图）中显示多个标记的区域（MKCoordinateRegion）