Question

我正在为我的网站制作谷歌地图，以便您可以查看每个用户的位置。只有当你点击某人的图标时它才会完美，每当我无法理解它我做错了什么时它会向你显示相同的内容？

    xmlhttp=new XMLHttpRequest();
    xmlhttp.open("GET","includes/xml.php",false);
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML; 

    var x=xmlDoc.getElementsByTagName("USER");
    var infoWindow = new google.maps.InfoWindow();
    var map; 
    var users = [];
    function initialize() { 
      var mapOptions = {
      zoom: 9, 
      center: new google.maps.LatLng(52.1424, 5.09428), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

    for (i=0;i<x.length;i++) { 
      var id = x[i].getElementsByTagName("USERID")[0].childNodes[0].nodeValue;
      users['USERNAME'+id] = x[i].getElementsByTagName("USERNAME")[0].childNodes[0].nodeValue;
      users['CITY'+id] = x[i].getElementsByTagName("CITY")[0].childNodes[0].nodeValue;
      users['COUNTRY'+id] = x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue;
      users['IMAGE'+id] = x[i].getElementsByTagName("IMAGE")[0].childNodes[0].nodeValue;
      users['IMAGEPIN'+id] = x[i].getElementsByTagName("IMAGEPIN")[0].childNodes[0].nodeValue;
      users['LAT'+id] = x[i].getElementsByTagName("LAT")[0].childNodes[0].nodeValue;
      users['LONG'+id] = x[i].getElementsByTagName("LONG")[0].childNodes[0].nodeValue;
      users['DATETIME'+id] = x[i].getElementsByTagName("DATETIME")[0].childNodes[0].nodeValue;
      users['TWITTER'+id] = x[i].getElementsByTagName("TWITTER")[0].childNodes[0].nodeValue;
      users['FA'+id] = x[i].getElementsByTagName("FA")[0].childNodes[0].nodeValue;
      users['ACTIVEUSER'+id] = x[i].getElementsByTagName("ACTIVEUSER")[0].childNodes[0].nodeValue;
      users['myLatlng'+id] = new google.maps.LatLng(users['LAT'+id],users['LONG'+id]);
      users['content'+id] = '<div style="width:220px;"><img id="avatar"style="margin-right: 5px;" src="' + users['IMAGE'+id] + '"></img>' + 
        '<b>' + users['USERNAME'+id] + '</b><br />' + 
        users['CITY'+id] + '<br />' + users['COUNTRY'+id] + '<br />' + 
        '<i>' + users['DATETIME'+id] + '</i><br />' +
        '<a href="http://www.furaffinity.net/user/' + users['FA'+id] + '" target="_blank"><img src="http://www.kinzart.com/images/fur-affinity-icon.png" Alt="Twitter" width="30" height="30"></a>' +
        '<a href="http://twitter.com/' + users['TWITTER'+id] + '/" target="_blank"><img src="http://biophiliccities.org/wp-content/uploads/2013/06/twitterICON.png" Alt="Twitter" width="30" height="30"></a>';
      users['window'+id] = new google.maps.InfoWindow({ content: users['content'+id]});
      users['marker'+id] = new google.maps.Marker({ position: users['myLatlng'+id], map: map, title: users['USERNAME'+id], icon: users['IMAGEPIN'+id]});
      google.maps.event.addListener(users['marker'+id], 'click', function() { infoWindow.setContent(users['content'+id]); infoWindow.open(map, users['marker'+id]) });
      }
    }
    google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

问题在于，当你在循环中设置事件监听器时，它最终会使循环的每次迭代都将infowindow内容设置为users['content'+id]的最后一个值。您需要考虑在代码中使用闭包。

这是另一种应该工作的方式：

for (i=0;i<x.length;i++) { 
      ...  // trimmed for brevity
      users['marker'+id] = new google.maps.Marker({ position: users['myLatlng'+id], map: map, title: users['USERNAME'+id], icon: users['IMAGEPIN'+id]});
      bindInfoWindow(users['marker'+id], users['content'+id]);
}

然后有这个功能：

function bindInfoWindow(marker, content) {
    google.maps.event.addListener(marker, 'click', function() { 
        infoWindow.setContent(content); 
        infoWindow.open(map, marker) 
    });
}

我的谷歌地图代码有问题

1 个答案: