0

我试图搜索这么多，但找不到任何适合我的地图的解决方案！

我想建立一个网站，人们可以上传天气照片并将其显示在谷歌地图上。在我想使用地理编码之前一切都很好！事实上，标记处于良好位置，但信息窗口始终相同（最后一个标记信息窗口）。我从一个解析 SQL 数据库中的 XML 的 php 文件中获取地址（“名称”）。我知道很少有人遇到同样的问题，但即使有他们的解决方案，它也不适合。

这是代码：

 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>皆の天気ｂｙロマンスカイ</title>
<link rel="stylesheet" href="styletenki.css" />
  <!--[if lte IE 9]>
        <link rel="stylesheet" href="styleie.css" />
        <![endif]-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;

function load() {
  geocoder = new google.maps.Geocoder();
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(47.6145, -122.3418),
    zoom: 4,
    mapTypeId: 'roadmap'
  });
  var infoWindow = new google.maps.InfoWindow;

  // Change this depending on the name of your PHP file
  downloadUrl("googleapitest.php", function (data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var name = markers[i].getAttribute("name");
      var date = markers[i].getAttribute("date");
      //var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
      //   parseFloat(markers[i].getAttribute("lgn")));
      var type = markers[i].getAttribute("type");
      var temperature = markers[i].getAttribute("temperature");
      var cloud = markers[i].getAttribute("cloud");
      var comment = markers[i].getAttribute("comment");

      var html = "<b>" + name + "</b> <br/>" + temperature + "</b> <br/>" + cloud + "</b> <br/>" + comment;

      //var icon = customIcons[type] || {};

      /* Appel au service de geocodage avec l'adresse en parametre */
      geocoder.geocode({
        'address': name
      }, function (results, status) {
        /* Si l'adresse a pu etre geolocalisee */
        if (status == google.maps.GeocoderStatus.OK) {

          /* Affichage du marker */
          var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
          });

          bindInfoWindow(marker, map, infoWindow, html);
        }
      });
    }
  });
}

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

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;

  request.onreadystatechange = function () {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

function doNothing() {}
  </script>

  </head>

  <body onLoad="load()">
    <div id="map" style="width: 800px; height: 600px"></div>
  </body>
</html>
4

1 回答 1

0

Your problem is that the html variable used in bindInfoWindow(marker, map, infoWindow, html); is changed during the for loop. When callback of geocoder.geocode is called, that's the last value of html that is used for all your markers. To work around this problem, you have to capture value of html with a closure. Something like :

(function(capturedHtml){
  geocoder.geocode({
    'address': name
  }, function (results, status) {
    /* Si l'adresse a pu etre geolocalisee */
    if (status == google.maps.GeocoderStatus.OK) {

      /* Affichage du marker */
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
      });

      bindInfoWindow(marker, map, infoWindow, capturedHtml);
    }
  });
})(html);
于 2012-12-03T08:42:59.627 回答