谷歌地图信息窗口通过xml的多个地址答案

【问题标题】：google map info window multiple addresses via xml谷歌地图信息窗口通过xml的多个地址
【发布时间】：2012-11-07 21:16:11
【问题描述】：

我正在使用下面的 Google 地图代码从使用 PHP 动态创建的 XML 文件中检索和绘制多个地址的标记。除了在谷歌地图信息窗口中显示相应标记的正确信息外，该代码正在做我需要的一切。我得到了所有标记的最后一个 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>

谷歌地图代码

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

【问题讨论】：

标签： php xml google-maps-api-3 infowindow

【解决方案1】：

地理编码器的异步特性存在问题，如果添加许多地址，地理编码器配额/速率限制就会出现问题（特别是因为您的代码不查看地理编码器的返回状态） .

所有这些问题都是相关的：

最简单的解决方案是使用函数闭包将地理编码器的调用与返回的结果相关联：

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

还有一个 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 循环：

for (var i = 0; i < markers.length; i++)
{
  geocodeAddress(markers[i]);
}

Working example

【讨论】：