javascript 来自地址数组的多个标记 Google Map API v3 并在 pageLoad 上进行地理编码时避免 OVER_QUERY_LIMIT
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19640055/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple markers Google Map API v3 from array of addresses and avoid OVER_QUERY_LIMIT while geocoding on pageLoad
提问by analyticalpicasso
I have to implement the multiple markers functionality from array of addresses. The string of addresses are being fetched from the database.
我必须从地址数组中实现多个标记功能。正在从数据库中获取地址字符串。
My array of addresses looks like this
我的地址数组看起来像这样
var address = <?php echo $add_js ?>;
I have gone through so many examples on internet and even in this forum, but in most of the examples latitude and longitude is already available in those databases. Is there any way so that i use that array of address and put multiple markers on google map. or any example where this type of concept is explained?!
我在互联网上甚至在这个论坛上经历了很多例子，但在大多数例子中，纬度和经度已经在这些数据库中可用。有什么方法可以让我使用该地址数组并在谷歌地图上放置多个标记。或任何解释此类概念的示例？！
I have practiced this example from JSFIDDLE but i am getting no output.
我已经从 JSFIDDLE 练习了这个例子，但我没有得到任何输出。
<script>
var geocoder;
var map;
var markersArray = [];
function initialize()
{
geocoder = new google.maps.Geocoder();
latlang = geocoder.geocode( {
'address': 'New Delhi, India'},
function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
map.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
markersArray.push(marker);
}
else
{
alert("Geocode was not successful for the following reason: " + status);
}
});
var myOptions =
{
center: latlang, zoom: 5,
mapTypeId: google.maps.MapTypeId.SATELLITE,
navigationControlOptions:
{
style: google.maps.NavigationControlStyle.SMALL
}
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
plotMarkers();
}
var locationsArray = new Array(
"New Delhi, India", "Gurgaon,Haryana, India", "Mumbai, India",
"Noida Sector-63,India","Banglore, Karnataka,India");
function plotMarkers(){
for(var i = 0; i < locationsArray.length; i++){
codeAddresses(locationsArray[i]);
}
}
function codeAddresses(address){
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
//markersArray.push(marker);
}
else{
alert("Geocode was not successful for the following reason: " + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
采纳答案by analyticalpicasso
Answer to add multiple markers.
回答添加多个标记。
UPDATE (GEOCODE MULTIPLE ADDRESSES)
更新（地理编码多个地址）
Here's the working Example Geocoding with multiple addresses.
这是具有多个地址的工作示例地理编码。
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var delay = 100;
var infowindow = new google.maps.InfoWindow();
var latlng = new google.maps.LatLng(21.0000, 78.0000);
var mapOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var geocoder = new google.maps.Geocoder();
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var bounds = new google.maps.LatLngBounds();
function geocodeAddress(address, next) {
geocoder.geocode({address:address}, function (results,status)
{
if (status == google.maps.GeocoderStatus.OK) {
var p = results[0].geometry.location;
var lat=p.lat();
var lng=p.lng();
createMarker(address,lat,lng);
}
else {
if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
nextAddress--;
delay++;
} else {
}
}
next();
}
);
}
function createMarker(add,lat,lng) {
var contentString = add;
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
map: map,
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
bounds.extend(marker.position);
}
var locations = [
'New Delhi, India',
'Mumbai, India',
'Bangaluru, Karnataka, India',
'Hyderabad, Ahemdabad, India',
'Gurgaon, Haryana, India',
'Cannaught Place, New Delhi, India',
'Bandra, Mumbai, India',
'Nainital, Uttranchal, India',
'Guwahati, India',
'West Bengal, India',
'Jammu, India',
'Kanyakumari, India',
'Kerala, India',
'Himachal Pradesh, India',
'Shillong, India',
'Chandigarh, India',
'Dwarka, New Delhi, India',
'Pune, India',
'Indore, India',
'Orissa, India',
'Shimla, India',
'Gujarat, India'
];
var nextAddress = 0;
function theNext() {
if (nextAddress < locations.length) {
setTimeout('geocodeAddress("'+locations[nextAddress]+'",theNext)', delay);
nextAddress++;
} else {
map.fitBounds(bounds);
}
}
theNext();
</script>
As we can resolve this issue with setTimeout()function.
因为我们可以用setTimeout()函数来解决这个问题。
Still we should not geocode known locations every time you load your page as said by @geocodezip
尽管如此，我们不应该在每次加载页面时对已知位置进行地理编码，如@geocodezip 所说
Another alternatives of these are explained very well in the following links:
在以下链接中很好地解释了这些的另一种选择：
How To Avoid GoogleMap Geocode Limit!
回答by netbrain
Regardless of your situation, heres a working demo that creates markers on the map based on an array of addresses.
无论您的情况如何，这里都有一个工作演示，可根据地址数组在地图上创建标记。
Javascript code embedded aswell:
还嵌入了 Javascript 代码：
$(document).ready(function () {
var map;
var elevator;
var myOptions = {
zoom: 1,
center: new google.maps.LatLng(0, 0),
mapTypeId: 'terrain'
};
map = new google.maps.Map($('#map_canvas')[0], myOptions);
var addresses = ['Norway', 'Africa', 'Asia','North America','South America'];
for (var x = 0; x < addresses.length; x++) {
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) {
var p = data.results[0].geometry.location
var latlng = new google.maps.LatLng(p.lat, p.lng);
new google.maps.Marker({
position: latlng,
map: map
});
});
}
});
回答by Julio Betta
Here is my solution:
这是我的解决方案：
dependencies: Gmaps.js, jQuery
依赖项：Gmaps.js、jQuery
var Maps = function($) {
var lost_addresses = [],
geocode_count = 0;
var addMarker = function() { console.log('Marker Added!') };
return {
getGecodeFor: function(addresses) {
var latlng;
lost_addresses = [];
for(i=0;i<addresses.length;i++) {
GMaps.geocode({
address: addresses[i],
callback: function(response, status) {
if(status == google.maps.GeocoderStatus.OK) {
addMarker();
} else if(status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
lost_addresses.push(addresses[i]);
}
geocode_count++;
// notify listeners when the geocode is done
if(geocode_count == addresses.length) {
$.event.trigger({ type: 'done:geocoder' });
}
}
});
}
},
processLostAddresses: function() {
if(lost_addresses.length > 0) {
this.getGeocodeFor(lost_addresses);
}
}
};
}(jQuery);
Maps.getGeocodeFor(address);
// listen to done:geocode event and process the lost addresses after 1.5s
$(document).on('done:geocode', function() {
setTimeout(function() {
Maps.processLostAddresses();
}, 1500);
});
