使用Javascript初始化標記的信息窗口

Question

我一直在嘗試將信息窗口添加到從地圖服務器接收JSON數組後，動態添加的Google地圖標記。我相信，我的問題不能很好地理解Javascript如何處理變量和範圍。

我試過這段代碼：

$.getJSON("server", function(data) { 
     if (data.items.length > 0) { 
      var infowindow = new google.maps.InfoWindow({ 
       content: "placeholder" 
      }); 
      for (var i = 0; i < data.items.length; i++) { 
       var latLng = new google.maps.LatLng(data.items[i]["lat"], 
                data.items[i]["lng"]); 
       var marker = new google.maps.Marker({ 
       position: latLng, 
       map: map, 
       title: data.items[i]["text"], 
       icon: data.items[i]["alert_type"], 
       animation: google.maps.Animation.DROP 
       }); 
       marker.addListener('click', function() { 
       infowindow.setContent(data.items[i]["text"]); 
       infowindow.open(map, this); 
       }); 
      } // end for 
     } // end if 
    }); // end getJSON 

這段代碼的問題是，當我點擊一個標記，以顯示信息窗口，我得到一個錯誤說data.items[i] is undefined但我知道，在我訪問了好它被定義在那行代碼之前的時間（我刪除了與訪問它的問題無關的代碼）。

因此，由於我無法訪問函數聲明內部，所以我在之前創建了一個var：var reportText = data.items[i]["text"];，然後在函數內部將具有問題的行更改爲infowindow.setContent(reportText);，該運行沒有錯誤。但是，當我點擊任何標記時，它們都會顯示窗口中的相同文本，這是我收到的上一次報告中的文本，而不是單獨設置。我認爲這是因爲infowindow在設置時會保存變量位置而不是字符串值，因此會讀取設置爲變量的最後一個值。

最後，我試圖初始化我的標記是不同的：

var marker = new google.maps.Marker({ 
    position: latLng, 
    map: map, 
    title: data.items[i]["text"], 
    icon: data.items[i]["alert_type"], 
    label: reportText, 
    animation: google.maps.Animation.DROP 
}); 

通過設置標籤，我想要的文字，我可以這樣做：

infowindow.setContent(this.label); 

而且我得到預期的行爲上infowindow顯示每個標記的正確文本。我對這個版本的問題是我使用的不是標籤設計的自定義圖標，而且它們看起來很醜陋。

我需要的是讓標記具有標籤屬性但不在標記中顯示標籤的方法，或者，最好是讓setContent在當時複製字符串值，而不是隻保存參考到變量。

任何幫助表示讚賞，謝謝。

Answer 1

在通過@geocodezip查看第一條評論中的問題並使用我自己的代碼進行操作後，我設法獲得了一個工作版本。它涉及創建一個我並不特別滿意的全局數組，但它具有預期的行爲。這裏是代碼的工作版本：

var texts = []; 

function makeRequest() { 
    $.getJSON("server/reports", function(data) { 
     if (data.items.length > 0) { 
      var infowindow = new google.maps.InfoWindow({ 
       content: "placeholder" 
      }); 
      var text = "<ul>"; 
      for (var i = 0; i < data.items.length; i++) { 
       var reportText = data.items[i]["text"]; 
       texts.push(reportText); 
       text += "<li>"; 
       text += data.items[i]["text"] + "<br />"; 
       text += data.items[i]["end_date"]; 
       text += "</li>"; 
       var latLng = new google.maps.LatLng(data.items[i]["lat"], 
                data.items[i]["lng"]); 
       var marker = new google.maps.Marker({ 
       position: latLng, 
       map: map, 
       title: data.items[i]["text"], 
       icon: data.items[i]["alert_type"], 
       animation: google.maps.Animation.DROP 
       }); 
       google.maps.event.addListener(marker, 'click', (function(marker, i) { 
       return function() { 
        infowindow.setContent(texts[i]); 
        infowindow.open(map, marker); 
       } 
       })(marker, i)); 
      } // end for 
      text += "</ul>" 
     } // end if 
     document.getElementById("content").innerHTML = text; 
    }); // end getJSON 
} 

[谷歌地圖JS API V3 - 簡單多個標記的例子]