我正在使用下面的Google Map Code来检索和绘制来自使用PHP动态创建的XML文件的多个地址的标记。该代码正在执行我需要的一切,除了在相应标记的Google Map信息窗口中显示正确的信息。我获得了所有标记的最后一个XML项目/列表的信息。
我一直在搜索并尝试不同的变体以使其正常工作,但没有运气。
示例XML数据
<?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地图代码
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);
});
});
}
});
}
您对地理编码器的异步性质有问题,如果添加了许多地址,您将在GeoCoder配额/速率限制中遇到问题(尤其是因为您的代码看上去不看起来在地理编码器的返回状态下)。
所有这些问题都是相关的:
- Google地图API V3:信息窗口显示地图上所有标记的相同信息
- gmaps api v3-多个标记&amp;Infowdindow
- Google Map多个Infowdowd不起作用
最简单的解决方案是使用函数闭合将呼叫与返回结果相关联:
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);
}
});
}
和一个将InfowDindow内容与标记相关联的CreateMarker函数:
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);
});
}
使您的循环:
for (var i = 0; i < markers.length; i++)
{
geocodeAddress(markers[i]);
}
工作示例