谷歌地圖API - 無法在幾個標誌設置幾個信息窗口

我有以下代碼：谷歌地圖API - 無法在幾個標誌設置幾個信息窗口

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0px; padding: 0px } 
     #map_canvas { height: 100% } 
    </style> 
    <script type="text/javascript" 
      src="http://maps.google.com/maps/api/js?sensor=false"> 
    </script> 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script type="text/javascript"> 
     function initialize() { 
      var cities = {{json|safe}}; 

      /* 
      for (i in cities) { // 0, 1 
       // document.write(cities[i]['fields']['name'] +'<br />'); 
       document.write(cities[i]['fields']['x'] +'<br />'); 
       document.write(cities[i]['fields']['y'] +'<br />'); 
       document.write('<br />'); 
      } /* */ 

      var center = new google.maps.LatLng(-22.784791,-45.088806); 
      var myOptions = { 
       zoom: 8, 
       center: center, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
      var citiesLoc = new Array(); 
      // var flightPlanCoords = new Array(); 
      var infoBoxes = new Array(); 
      var markers = new Array(); 

      for (var i in cities) { 
       // document.write(cities[i]['fields']['name']); 
       citiesLoc[i] = new google.maps.LatLng(cities[i]['fields']['x'],cities[i]['fields']['y']); 

       // flightPlanCoords.push(new google.maps.LatLng(cities[i]['fields']['x'],cities[i]['fields']['y'])); 

       infoBoxes[i] = new google.maps.InfoWindow({ 
        content: "<div>" + cities[i]['fields']['name'] + "</div>" 
       }); 

       markers[i] = new google.maps.Marker({ 
        position: citiesLoc[i], 
        map: map, 
        title: cities[i]['fields']['name'] 
       }); 


       google.maps.event.addListener(markers[i], 'click', function() { 
        infoBoxes[i].open(map, markers[i]); 
       }); 


      }; 




      // document.write(infoBoxes[1]['content']); 
      /* 
      var flightPath = new google.maps.Polyline({ 
       path: flightPlanCoords, 
       strokeColor: "#0000ff", 
       strokeOpacity: 1.0, 
       strokeWeight: 5 
      }); 
      flightPath.setMap(map); 
      */ 
     } 

    </script> 
</head> 
<body onload="initialize()"> 
    <div id="map_canvas" style="width:100%; height:100%"></div> 
</body> 
</html>

它設置了兩個標誌有兩個信息窗口連接，但是當我點擊任何一個，只是其中之一（第二個1號零索引）顯示出來。如果我這樣寫：

google.maps.event.addListener(markers[0], 'click', function() { 
       infoBoxes[0].open(map, markers[0]); 
      }); 
      google.maps.event.addListener(markers[1], 'click', function() { 
       infoBoxes[1].open(map, markers[1]); 
      });

然後它工作得很好。我錯過了什麼？

來源

2010-10-22 Victor Piousbox

當infoBoxes[i].open(map, markers[i]);在你的函數裏面被評估時，它將取最後一個值爲i，即循環結束後的值，即1。

只要做一個alert(i)在那裏看到發生這種情況。

這裏的粗定位點（測試工作）：

markers[i]._index = i; 
google.maps.event.addListener(markers[i], 'click', function() { 
    infoBoxes[this._index].open(map, markers[this._index]); 
});

你或許應該在這裏閱讀更多http://code.google.com/apis/maps/documentation/javascript/events.html。我知道閱讀很多東西，但有時候這是必要的。

來源

2010-10-22 16:56:53

呃...我該如何修復它？ – 2010-10-22 16:58:25

你試過我的建議修復嗎？ – 2010-10-22 17:11:24

我試過了，但沒有奏效......我正在閱讀該文檔。 – 2010-10-22 17:58:07

-1

我真的不知道問題是什麼......這個問題仍然沒有答案。然而這個技巧是有效的：我創建了兩個計數器並在我的循環中使用和增加它們。我真的不知道爲什麼這應該起作用，而且這不是編程的方式，但是在這裏。

  counter1 = 0; 
      counter2 = 0; 
      for (var i in cities) { 
       // document.write(cities[i]['fields']['name']); 
       citiesLoc[i] = new google.maps.LatLng(cities[i]['fields']['x'],cities[i]['fields']['y']); 

       // flightPlanCoords.push(new google.maps.LatLng(cities[i]['fields']['x'],cities[i]['fields']['y'])); 

       infoBoxes[i] = new google.maps.InfoWindow({ 
        content: "<div>" + cities[i]['fields']['name'] + "</div>" 
       }); 

       markers[i] = new google.maps.Marker({ 
        position: citiesLoc[i], 
        map: map, 
        title: cities[i]['fields']['name'] 
       }); 

       google.maps.event.addListener(markers[i], 'click', function() { 
        infoBoxes[counter1++].open(map, markers[counter2++]); 
       }); 

      };

來源

2010-10-22 19:34:52

wtf ?!我慚愧。我的東西當然是錯的，但我更驚訝你的解決方案確實有效。你能解釋一下給我還是指點我適當的資源？具體來說，標記[i] ._ index和this._index之間的關係是什麼，以及你修復它們的方式變量的作用域是什麼？ – 2010-10-29 18:12:31

在點擊回調回調函數'this'中引用了當前標記（被點擊的標記），因此在添加處理程序時它與'markers [i]'**具有相同的對象**。請注意，我是一個變量，如果你使用'markers [i]'來處理，你將在每個回調中得到最後一個賦給'i'的值。所以在點擊回調中使用'i'沒有任何意義。相反，我們將'i'綁定到對象，以便稍後從'this'檢索它。注意：'this'對象存在並且它引用標記的事實是因爲Google是如何實現它的。 – 2010-11-18 06:41:28

谷歌地圖API - 無法在幾個標誌設置幾個信息窗口

回答

相關問題