谷歌地图信息窗口通过xml多个地址 [英] google map info window multiple addresses via xml
问题描述
我使用下面的Google地图代码从PHP动态创建的XML文件中检索并绘制多个地址的标记。该代码正在做我需要的一切，除了在Google地图信息窗口中显示相应标记的正确信息外。我收到了所有标记的最后一个XML项目/列表的信息。
我一直在寻找并尝试不同的变体来使其运行，但没有运气。
示例XML数据
<？xml version =1.0 encoding =UTF-8？>
<列表>
< listing>
<地址> 123街< /地址>
< city> MANOTICK< / city>
< / listing>
< listing>
<地址> 456街< /地址>
< city> MANOTICK< / city>
< / listing>
< listing>
<地址> 111大道< /地址>
< city> MANOTICK< / city>
< / listing>
< listing>
<地址> 777大道< /地址>
< city>渥太华< / city>
< / listing>
< listing>
<地址> 333街< /地址>
< city> Manotick< / city>
< / listing>
< /列表>
google map code
函数initialize（）
{
var myLatLng = new google.maps.LatLng（45.2340684，-75.6287287）;
var myOptions =
{
zoom：10，
mapTypeControl：true，
center：myLatLng，
zoomControl：true，
zoomControlOptions：
{
style：google.maps.ZoomControlStyle.SMALL
}，
StreetViewControl：false，
mapTypeId：google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map（document.getElementById（'google_map'），myOptions）;
var info_window = new google.maps.InfoWindow;
google.maps.event.addListener
（map，'click'，
function（）
{
info_window.close（）;
}） ;
downloadUrl
（'listings.xml'，
function（listings_data）
{
var markers = listings_data.documentElement.getElementsByTagName（ '; listing'）;
var geocoder = new google.maps.Geocoder（）;
for（var i = 0; i< markers.length; i ++）
{
var address = markers [i] .getElementsByTagName（'address'）[0] .firstChild.data;
var city = markers [i] .getElementsByTagName（'city'）[0] .firstChild.data;
var address_google_map = address +'，'+ city +'，ON';
var info_text = address +'<'>'+ city +'ON';
geocoder.geocode
（{'address'：address_google_map}，
函数（结果）
{
var marker = new google.maps.Marker
（{
地图：地图，
位置：results [0] .geometry.location
}）;
google.maps.event.addListener
（marker，'click'，
function（）
{
info_window.setContent（info_text）;
info_window .open（map，marker）;
}）;
}）;
}
}）;
异步地理编码器的性质，如果您添加许多地址，您将遇到地理编码器配额/速率限制的问题（特别是因为您的代码没有查看地理编码器的返回状态）。
所有这些问题都是相关的：
最简单的解决方案是使用函数闭包将调用与地理编码器关联结果：
geocodeAddress（xmldata）
{
var address = xmldata.getElementsByTagName（'address'） [0] .firstChild.data;
var city = xmldata.getElementsByTagName（'city'）[0] .firstChild.data;
var address_google_map = address +'，'+ city +'，ON';
var info_text = address +'< br />'+ city +'ON';
geocoder.geocode
（{'address'：address_google_map}，
函数（结果，状态）
{
if（status == google。 maps.GeocoderStatus.OK）{
createMarker（results [0] .geometry.location，info_text）;
} else {
alert（geocode of+ address +failed：+状态）;
}
}）;
}
还有一个createMarker函数，用于将infowindow内容与标记相关联：
函数createMarker（latlng，html）
{
var marker = new google.maps.Marker
（{
map：map，
position：latlng
}）;
google.maps.event.addListener（marker，'click'，function（）{
info_window.setContent（html）;
info_window.open（map，marker）;
}）;
}
使您的for循环：
for（var i = 0; i< markers.length; i ++）
{
geocodeAddress（markers [i]）;
}
I'm using the Google map code below to retrieve and plot markers for multiple addresses from an XML file dynamically created with PHP. The code is doing everything I need except for displaying the correct information in the Google map info window for the corresponding marker. I get the information of the last XML item/listing for all the markers.
I've been searching and trying different variations to get it to work, but no luck.
sample XML data
<?xml version="1.0" encoding="UTF-8"?>
<listings>
<listing>
<address>123 Street</address>
<city>MANOTICK</city>
</listing>
<listing>
<address>456 Street</address>
<city>MANOTICK</city>
</listing>
<listing>
<address>111 Avenue</address>
<city>MANOTICK</city>
</listing>
<listing>
<address>777 Avenue</address>
<city>Ottawa</city>
</listing>
<listing>
<address>333 Street</address>
<city>Manotick</city>
</listing>
</listings>
google map code
function initialize ()
{
var myLatLng = new google.maps.LatLng(45.2340684, -75.6287287);
var myOptions =
{
zoom: 10,
mapTypeControl: true,
center: myLatLng,
zoomControl: true,
zoomControlOptions:
{
style: google.maps.ZoomControlStyle.SMALL
},
StreetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('google_map'), myOptions);
var info_window = new google.maps.InfoWindow;
google.maps.event.addListener
(map, 'click',
function ()
{
info_window.close();
});
downloadUrl
('listings.xml',
function (listings_data)
{
var markers = listings_data.documentElement.getElementsByTagName('listing');
var geocoder = new google.maps.Geocoder();
for (var i = 0; i < markers.length; i++)
{
var address = markers[i].getElementsByTagName('address')[0].firstChild.data;
var city = markers[i].getElementsByTagName('city')[0].firstChild.data;
var address_google_map = address + ', ' + city + ', ON';
var info_text = address + '<br />' + city + ' ON';
geocoder.geocode
({'address': address_google_map},
function (results)
{
var marker = new google.maps.Marker
({
map: map,
position: results[0].geometry.location
});
google.maps.event.addListener
(marker, 'click',
function()
{
info_window.setContent(info_text);
info_window.open(map, marker);
});
});
}
});
}
You have a problem with the asynchronous nature of the geocoder, and if you add many addresses you will have a problem with the geocoder quota/rate limits (particularly since your code doesn't look at the return status of the geocoder).
All these questions are related:
- Google Maps Api v3: Info window displaying same information for all the markers on the map
- GMaps API V3 - Multiple Markers & InfoWindow
- Google Map multiple infowindow does not work
The simplest solution is to use function closure to associate the call to the geocoder with the returned result:
geocodeAddress(xmldata)
{
var address = xmldata.getElementsByTagName('address')[0].firstChild.data;
var city = xmldata.getElementsByTagName('city')[0].firstChild.data;
var address_google_map = address + ', ' + city + ', ON';
var info_text = address + '<br />' + city + ' ON';
geocoder.geocode
({'address': address_google_map},
function (results, status)
{
if (status == google.maps.GeocoderStatus.OK) {
createMarker(results[0].geometry.location, info_text);
} else {
alert("geocode of "+ address +" failed:"+status);
}
});
}
And a createMarker function to associate the infowindow content with the marker:
function createMarker(latlng, html)
{
var marker = new google.maps.Marker
({
map: map,
position: latlng
});
google.maps.event.addListener(marker, 'click', function() {
info_window.setContent(html);
info_window.open(map, marker);
});
}
Makes your for loop:
for (var i = 0; i < markers.length; i++)
{
geocodeAddress(markers[i]);
}
这篇关于谷歌地图信息窗口通过xml多个地址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
