2012-11-07 135 views
1

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

回答

2

您有地理编码器的异步性的问题,如果你添加许多地址,你将不得不与地理编码器有问题配额/费率限制(特别是因为您的代码没有查看地理编码器的返回状态)。

所有这些问题都涉及:

最简单的解决方案是使用函数闭的号召与返回的结果相关联的地理编码器:

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

+0

感谢。我有它的工作,但我只是想,我怎么会根据绘制的标记最好地中心地图?我试过在for循环和binds.extend(results [0] .geometry)之后立即使用 'bounds = new google.maps.LatLngBounds();'在CreateMarker函数和'map.fitBounds(bounds) .location);调用CreateMarker函数后。 对此评论抱歉。我不确定如何发布回复或跟进。随着更多的信息或问题以及完成的代码,当我完成他人使用。 – spiderling

+0

看看我添加的工作示例。它以标记为中心。至于跟进,你可以编辑你的问题(虽然拟合的界限是另一个问题......) – geocodezip

+0

感谢您的帮助和工作的例子!它运作良好。不是这是一个大问题,但我不能使用xmlParse函数。 – spiderling