數據沒有通過谷歌地圖信息窗口正確循環

Question

我有一個數據被通過JSON拉入。它正確地拉入並且將標記放置在它們應該是的位置上。 我遇到的問題與google.maps.event.addListener有關，所有標記都在信息窗口中顯示相同的內容，由於某些原因，它似乎沒有正確循環數據。

下面是我有什麼，爲什麼這不能正常工作的任何想法，謝謝。

$.get('http://localhost/map/map/locations', function(result) { 
    var locations = $.parseJSON(result); 


    // Markers 
    var markers = []; 

    // Looping through the JSON data 
    for (var i = 0, length = locations.length; i < length; i++) { 

     var data = locations[i]; 

     // Creating a marker and putting it on the map 
     var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(data.lat, data.long), 
      map: map, 
      title: data.title, 
      icon: iconSrc[data.category] 
     }); 
     markers.push(marker); 


     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
      return function() { 
       infoWindow.setContent("<div class='cont_box' id='" + data.entry_id + "'> <h2>" + data.title + "</h2> <div class='cont'><p><img src='" + data.infoImage + "' alt='' width='100' height='66' style='float:right;'>" + data.windowText + "</p></div><div style='clear:both;'></div><div class='link'><a href='" + data.moreLink + "' target='_blank'>" + data.moreText + "</a></div></div>"); 
       infoWindow.open(map, marker); 
      } 
     })(marker, i)); 

    }// END for loop 

}); 

更新

將數據添加到VAR的背景之後，它工作正常。

我現在必須根據其類別顯示和隱藏標記。我認爲這可能是一個類似的問題。使用data var包含這些隱藏和顯示函數的最佳方法是什麼？

功能：

/** Shows all markers of a particular category, and ensures the checkbox is checked **/ 
    function show(category) { 
     for (var i=0; i<locations.length; i++) { 
      if (data.category == category) { 
       markers[i].setVisible(true); 
      } 
     } 
    }// END function show 



    /** Hides all markers of a particular category, and ensures the checkbox is cleared **/ 
    function hide(category) { 
     for (var i=0; i<locations.length; i++) { 
      if (data.category == category) { 
       markers[i].setVisible(false); 
      } 
     } 
    }// END function hide 

    /** Show or hide the categories initially **/ 
    show("financial_services"); 
    show("government"); 
    show("identity_access"); 
    show("machine_to_machine"); 
    show("telecommunications"); 
    show("transport"); 

    /** Action when checkbox is clicked **/ 
    $(".checkbox").click(function(){ 
     var cat = $(this).attr("value"); 

     // If checked 
     if ($(this).is(":checked")){ 
      show(cat); 
     } 
     else { 
      hide(cat); 
     } 
    }); 

這是怎麼回事目前的一切坐鎮，它withing的$不用彷徨電話，但外面的for循環它有它的數據VAR：

// JSON feed 
$.get('http://localhost/map/map/locations', function(result) { 
    var locations = $.parseJSON(result); 


    // Markers 
    var markers = []; 

    // Looping through the JSON data 
    for (var i = 0, length = locations.length; i < length; i++) { 

     var data = locations[i]; 

     // Creating a marker and putting it on the map 
     var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(data.lat, data.long), 
      map: map, 
      title: data.title, 
      icon: iconSrc[data.category] 
     }); 
     markers.push(marker); 


     google.maps.event.addListener(marker, 'click', (function(marker, i, loc) { 
      return function() { 
       infoWindow.setContent("<div class='cont_box' id='" + loc.entry_id + "'> <h2>" + loc.title + "</h2> <div class='cont'><p><img src='" + loc.infoImage + "' alt='' width='100' height='66' style='float:right;'>" + loc.windowText + "</p></div><div style='clear:both;'></div><div class='link'><a href='" + loc.moreLink + "' target='_blank'>" + loc.moreText + "</a></div></div>"); 
       infoWindow.open(map, marker); 
      } 
     })(marker, i, data)); 

    }// END for loop 


    /** Shows all markers of a particular category, and ensures the checkbox is checked **/ 
    function show(category) { 
     for (var i=0; i<locations.length; i++) { 
      if (data.category == category) { 
       markers[i].setVisible(true); 
      } 
     } 
    }// END function show 



    /** Hides all markers of a particular category, and ensures the checkbox is cleared **/ 
    function hide(category) { 
     for (var i=0; i<locations.length; i++) { 
      if (data.category == category) { 
       markers[i].setVisible(false); 
      } 
     } 
    }// END function hide 

    /** Show or hide the categories initially **/ 
    show("financial_services"); 
    show("government"); 
    show("identity_access"); 
    show("machine_to_machine"); 
    show("telecommunications"); 
    show("transport"); 

    /** Action when checkbox is clicked **/ 
    $(".checkbox").click(function(){ 
     var cat = $(this).attr("value"); 

     // If checked 
     if ($(this).is(":checked")){ 
      show(cat); 
     } 
     else { 
      hide(cat); 
     } 
    }); 
}); 

Answer 1

您的addListener會打開一個新的上下文，因此您的數據變量不可用。添加數據的VAR在上下文：

google.maps.event.addListener(marker, 'click', (function(marker, i, myData) { 
    return function() { 
     infoWindow.setContent("<div class='cont_box' id='" + myData.entry_id + "'> <h2>"); 
     infoWindow.open(map, marker); 
    } 
})(marker, i, data));