在地址arrays中添加多个标记Google Map API v3，并在pageLoad上进行地理编码时避免OVER_QUERY_LIMIT

我必须从地址数组实现多个标记function。 地址串是从数据库中获取的。

我的地址数组看起来像这样

var address = <?php echo $add_js ?>; 

我已经在互联网上甚至在这个论坛上经历了这么多的例子，但是在大多数例子中，经纬度已经在这些数据库中可用。 有什么办法，以便我使用该地址的数组，并在谷歌地图上放置多个标记。 或者解释这种types的概念的例子？

我从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> 

Answer 1

无论您的情况如何，inheritance人一个工作演示，在地图上创build地图上的标记。

http://jsfiddle.net/P2QhE/

embedded的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 }); }); } }); 

Answer 2

回答添加多个标记。

更新（GEOCODE多地址）

以下是具有多个地址的工作示例地址parsing。

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

正如我们可以用setTimeout()函数解决这个问题一样。

尽pipe如此，我们仍然不应该在@geocodezip所说的每次加载页面时对已知位置进行地理编码

在下面的链接中可以很好地解释这些替代scheme：

如何避免GoogleMap地理编码限制！

Geocode多个地址教程由Mike Williams

Google Developers举例

Answer 3

这是我的解决scheme：

依赖关系：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); });