从地址阵列中的多个标志谷歌地图API v3和避免OVER_QUERY_LIMIT而在页面加载地址解析 [英] Multiple markers Google Map API v3 from array of addresses and avoid OVER_QUERY_LIMIT while geocoding on pageLoad
本文介绍了从地址阵列中的多个标志谷歌地图API v3和避免OVER_QUERY_LIMIT而在页面加载地址解析的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我要实现从地址阵列的多个标记功能。地址字符串正在从数据库中获取的。
我的地址阵列看起来像这样
VAR地址=＆LT;？PHP的echo $ add_js取代;
我已经经历甚至在这个论坛上互联网和这样的例子很多了，但是在大多数例子中纬度和经度是这些数据库中已经可用。有什么办法让我使用的地址数组，并把多个标记在谷歌地图。
或者这种类型的概念解释的例子吗？！
我都练过从的jsfiddle这个例子，但我没有得到的输出。
＆LT;脚本＆GT;
VAR地理codeR;
VAR地图;
变种markersArray = []; 函数初始化（）
{
地理codeR =新google.maps.Geo codeR（）; latlang =地理coder.geo code（{ 地址：印度新德里}， 功能（结果状态）
{ 如果（状态== google.maps.Geo coderStatus.OK）
{
map.setCenter（结果[0] .geometry.location）;
标记=新google.maps.Marker（{
地图：地图，
位置：结果[0] .geometry.location
}）;
markersArray.push（标记）; }
其他
{
警报（地理code不成功，原因如下：+状态）;
}
}）; VAR myOptions =
{
中心：latlang，变焦：5，
mapTypeId设为：的google.maps.MapTypeId.SATELLITE，
navigationControlOptions：
{
风格：google.maps.NavigationControlStyle.SMALL
}
};
地图=新google.maps.Map（的document.getElementById（map_canvas的），myOptions）;
plotMarkers（）;
} VAR locationsArray =新阵列（
印度新德里，古尔冈，印度哈里亚纳邦，印度孟买
诺伊达部门-63，印度，班加罗尔，印度卡纳塔克邦）; 功能plotMarkers（）{ 对于（VAR I = 0; I＆LT; locationsArray.length;我++）{ codeAddresses（locationsArray [I]）; }
} 功能codeAddresses（地址）{
地理coder.geo code（{'地址'：地址}，功能（结果状态）{
如果（状态== google.maps.Geo coderStatus.OK）{
map.setCenter（结果[0] .geometry.location）;
标记=新google.maps.Marker（{
地图：地图，
位置：结果[0] .geometry.location
}）;
//markersArray.push(marker）;
}
其他{
警报（地理code不成功，原因如下：+状态）;
}
}）;
} google.maps.event.addDomListener（窗口'负荷'，初始化）; ＆LT; / SCRIPT＆GT;
解决方案
答添加多个标记。
UPDATE（GEO code多个地址）
下面的工作实例地理编码与多个地址。
＆LT;脚本类型=文/ JavaScript的SRC =http://maps.google.com/maps/api/js?sensor=false＆GT;
＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
VAR延迟= 100;
VAR信息窗口=新google.maps.InfoWindow（）;
VAR经纬度=新google.maps.LatLng（21.0000，78.0000）;
VAR的MapOptions = {
变焦：5，
中心：经纬度，
mapTypeId设为：google.maps.MapTypeId.ROADMAP
}
VAR地理codeR =新google.maps.Geo codeR（）;
VAR地图=新google.maps.Map（的document.getElementById（图）的MapOptions）;
VAR边界=新的google.maps.LatLngBounds（）; 功能地理codeAddress（地址，旁边）{
地理coder.geo code（{地址：地址}，功能（结果状态）
{
如果（状态== google.maps.Geo coderStatus.OK）{
VAR P =结果[0] .geometry.location;
VAR经纬度= p.lat（）;
变种经度= p.lng（）;
createMarker（地址，纬度，经度）;
}
其他{
如果（状态== google.maps.Geo coderStatus.OVER_QUERY_LIMIT）{
nextAddress--;
延迟++;
}其他{
}
}
下一个（）;
}
）;
}
功能createMarker（添加，纬度，经度）{
VAR contentString =增加;
VAR的标记=新google.maps.Marker（{
位置：新google.maps.LatLng（纬度，经度）
地图：地图，
}）; google.maps.event.addListener（标记，'点击'，功能（）{
infowindow.setContent（contentString）;
infowindow.open（地图，标记）;
}）; bounds.extend（marker.position）; }
VAR位置= [
印度新德里，
孟买，印度，
Bangaluru，卡纳塔克邦，印度，
海得拉巴，Ahemdabad，印度，
古尔冈，哈里亚纳邦，印度，
Cannaught广场，新德里，印度，
班德拉，孟买，印度，
奈尼塔尔，Uttranchal，印度，
哇哈，印度，
西孟加拉邦，印度，
查谟，印度，
康亚库玛瑞，印度，
喀拉拉邦，印度，
喜马偕尔邦，印度，
西隆，印度，
昌迪加尔，印度，
德瓦卡，新德里，印度，
印度普纳，
印多尔，印度，
印度奥里萨邦'，
西姆拉，印度，
印度古吉拉特邦
];
变种nextAddress = 0;
功能theNext（）{
如果（nextAddress＆LT; locations.length）{
的setTimeout（'地理codeAddress（'+位置[nextAddress] +'，theNext），延迟）;
nextAddress ++;
}其他{
map.fitBounds（边界）;
}
}
下一个（）;＆LT; / SCRIPT＆GT;
我们可以解决与的setTimeout（）函数这个问题。
不过，我们不应该每当加载页面时通过@地理codeZIP说地理code已知位置
这些替代另一个在下面的链接很好的解释：
<一个href=\"http://gis.stackexchange.com/questions/15052/how-to-avoid-google-map-geo$c$c-limit?newreg=fa34116a6a0c4b33a18f38ba7762263b\">How为了避免GoogleMap的地理code极限！
由谷歌开发者示例
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.
<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 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.
Still we should not geocode known locations every time you load your page as said by @geocodezip
Another alternatives of these are explained very well in the following links:
How To Avoid GoogleMap Geocode Limit!
Geocode Multiple Addresses Tutorial By Mike Williams
这篇关于从地址阵列中的多个标志谷歌地图API v3和避免OVER_QUERY_LIMIT而在页面加载地址解析的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
