2013-01-03 52 views
0

請幫我解決這個問題。我有以下代碼與工作地址變量。我嘗試爲Infowindow添加標題,以便用戶在地圖上點擊標記以查看彈出窗口中的某些內容。不幸的是,對於所有彈出窗口,我可以看到相同的標題。我測試過,它是一個正確的js數組,但只顯示來自數組的第一個標題..請幫忙解決這個問題..先謝謝各位傢伙!谷歌地圖信息窗口彈出不加載動態內容

<script type="text/javascript" charset="utf-8">  
var map; 
var address = < ? php echo json_encode($adr); ? > ; 
var titles = < ? php echo json_encode($ttl); ? > ; 
var x = 0; 
var nbAddresses = address.length; 
var geocoder; 
var mark; 
var contentString = titles[x]; 

function init() { 
    var moptions = { 
     zoom: 10, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map"), moptions); 
    geocoder = new google.maps.Geocoder(); 
    for (var i = 0; i < nbAddresses; i++) { 
     geocoder.geocode({ 
      'address': address[i] 
     }, function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
       mark = new google.maps.Marker({ 
        position: results[0].geometry.location, 
        map: map, 
        title: titles[x] 
       }); 
       map.setCenter(results[0].geometry.location); 
       x++; 
       setInfoWindow(); 
      } 
     }); 
    } 

    function setInfoWindow() { 
     google.maps.event.addListener(mark, 'click', function(event) { 
      var iwindow = new google.maps.InfoWindow(); 
      iwindow.setContent(contentString); 
      iwindow.open(map, this); 
     }); 
    } 
} 
window.onload = init; 
</script>  
+0

鏡頭問題是:爲什麼這樣: var contentString = titles [x]; 不會加載陣列中的每個標題,但只有第一個? – thecore7

回答

0

變化
x ++;
setInfoWindow();到

setInfoWindow(); 
x++; 
sets the problem ! 
+0

這是否解決了您的問題? – Cdeez

0

在你的程序開始你的contentString設置爲第一要素的標題陣列

var contentString = titles[x]; 

,然後你使用這個變數的setInfoWindow功能不變裏面。

如果你改變了setInfoWindow當調用setInfoWindow接受像這樣

function setInfoWindow(contentString) {... 

一個contentString參數,傳遞的稱號。

setInfoWindow(title[x]); 

確保在調用此函數後增加x,所以請在setInfoWindow調用下移動x ++。

編輯您還會不時發現一些奇怪的問題,其中一些標題可能出現在錯誤的標記上。這是因爲您一次執行多個地址解析,並且您可能會按順序收到響應。

以下修改將修復該問題。

for (var i = 0; i < nbAddresses; i++) { 
    geocoder.geocode({ 
     'address': address[i] 
    }, return function(x) { // we define a function and call it straight away. The function returns another function which is our callback. 
     function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
       mark = new google.maps.Marker({ 
        position: results[0].geometry.location, 
        map: map, 
        title: titles[x] 
       }); 
       map.setCenter(results[0].geometry.location); 
       setInfoWindow(); 
      } 
     } 
    }(i)); // (i) after the function declaration calls the function and passes in the current value of i 
} 

所以基本上我們在這裏做了定義函數,然後運行它與「I」中通過的電流值,立竿見影。然後,函數將返回另一個函數。這個函數在goecoding完成後會運行。但是現在我們對'i'的引用就像函數被定義時那樣。所以你不再需要在這個函數外面保留x的記錄,因爲x將等於i,它與傳入geocoder的地址相對應。

這被稱爲閉包。 How do JavaScript closures work?