Google Map InfoWindow 内容绑定

Question

I'm new with Google map.我是谷歌地图的新手。 I'm having problem in rebinding the data in my infowindow.我在重新绑定信息窗口中的数据时遇到问题。

When I close the window using the "x" button in the upper right of the infowindow,当我使用信息窗口右上角的“x”按钮关闭窗口时，
then open it again, all of the updated contents of the infowindow will load again to its initial state instead of the latest update?然后再次打开它，信息窗口的所有更新内容将再次加载到其初始状态而不是最新更新？ What I want is that when I close the我想要的是当我关闭
infowindow, the infowindow must have the latest data. infowindow，infowindow 必须有最新的数据。

<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>PHP/MySQL & Google Maps Example</title>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="D:\Program Files\xampp\xampp\htdocs\googletest\progressBar.js"></script>
<script type="text/javascript">

//<![CDATA[

var infoWindow=new Array();
var htmlPrevious=new Array();
var html;
var marker=new Array();

function load() {
    var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(7.11425, 124.83758),
    zoom: 11,
    mapTypeId: 'roadmap'
});
  
downloadUrl("phpsqlajax_genxml.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    html = new Array(markers.length);
    infowindow = new Array(markers.length);
    
    for (var i = 0; i < markers.length; i++) {
        infoWindow[i] = new google.maps.InfoWindow;
        var sender = markers[i].getAttribute("sender");
        var update = markers[i].getAttribute("update_time");
        var name = markers[i].getAttribute("name");
    var humidity = markers[i].getAttribute("humidity");
    var temperature = markers[i].getAttribute("temperature");
    var rain = markers[i].getAttribute("rain");
        var wind_dir = markers[i].getAttribute("wind_dir");
    var wind_speed = markers[i].getAttribute("wind_speed");
    var image = markers[i].getAttribute("image");
        var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      
          
        html[i] = "<div style='display:block;' width='600' height='300' overflow='hidden'><img style='display:block;' src='"+image+" ' width='300' height='184' /> <br/><b>" + name + "</b> <br/>Sender: " + sender + "<br/>Time: " + update + "<br/> Humidity: " + humidity + "<br/>Temperature: " + temperature + "<br/>Rain: " + rain + "<br/>Wind Direction:   " + wind_dir + "<br/>Wind Speed: " + wind_speed + "<div>";
      
     
      htmlPrevious[i]=html[i];
      
       marker[i] = new google.maps.Marker({
        map: map,
        position: point,
    title: name 
      });
    
      bindInfoWindow(marker[i], map, infoWindow[i], html[i]);
      
    }//end for loop
  });//downloadurl
  setInterval("refreshMarker()",1000);
}

function refreshMarker(){
    downloadUrl("phpsqlajax_genxml.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    
    for (var i = 0; i < markers.length; i++) {
      var sender = markers[i].getAttribute("sender");
      var update = markers[i].getAttribute("update_time");
      var name = markers[i].getAttribute("name");
      var humidity = markers[i].getAttribute("humidity");
      var temperature = markers[i].getAttribute("temperature");
      var rain = markers[i].getAttribute("rain");
      var wind_dir = markers[i].getAttribute("wind_dir");
      var wind_speed = markers[i].getAttribute("wind_speed");
      var image = markers[i].getAttribute("image");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
    
       html[i] = "<div style='display:block;' width='600' height='300' overflow='hidden'><img style='display:block;' src='"+image+" ' width='300' height='184' /> <br/><b>" + name + "</b> <br/>Sender: " + sender + "<br/>Time: " + update + "<br/> Humidity: " + humidity + "<br/>Temperature: " + temperature + "<br/>Rain: " + rain + "<br/>Wind Direction:   " + wind_dir + "<br/>Wind Speed: " + wind_speed + "<div>";
       

        if (html[i]!=htmlPrevious[i]){
        htmlPrevious[i]=html[i];
        
    
        
    infoWindow[i].setContent(html[i]);
        
        google.maps.event.addListener(marker, 'click', function() {
        infoWindow[i].set("marker",null);
        infoWindow[i].close();
           bindInfoWindow(marker[i], map, infoWindow[i], html[i]);
           infoWindow[i]=infoWindow;
  });
        }
        //infoWindow.open(map, marker);
    

    }
  });
}

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

function closeInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'closeclick', function() {
    infoWindow.close();
    alert("im here");
  });
}

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: 1330px; height: 610px"></div>
</body>

</html>

Any help will highly appreciated.. :-)任何帮助将不胜感激.. :-)

Answer 1

Update your function to be:将您的功能更新为：

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

Google Map InfoWindow 内容绑定

问题描述

1 个解决方案

解决方案1
2 已采纳 2012-01-31 23:00:31

Google Map InfoWindow 内容绑定

问题描述

1 个解决方案

解决方案1 2 已采纳 2012-01-31 23:00:31

解决方案1
2 已采纳 2012-01-31 23:00:31