返回的JSON沒有正確的處理jQuery.each（）對谷歌地圖

顯示爲新的標誌物我回JSON從PHP腳本數據，與SQL產生的，我的客戶的jQuery.each()，基於根據用戶在過濾表單中選擇的內容並點擊提交，更新並在我的Google地圖上將所有返回的JSON數據顯示爲標記。返回的JSON沒有正確的處理jQuery.each（）對谷歌地圖

問題是不是顯示返回JSON數據作爲新的標誌物，它只是邊界上已經顯示的標記（當頁面初始加載默認的）。

我在這裏做錯了什麼？

我使用this jQuery plugin來處理我的Google地圖。

我返回的JSON看起來是這樣的：

[{"Name":"John Smith","Address":"123 Fake St.", "Telephone":"50011111" ,"Lat":"coord values","Lng":"coord values"},{...repeat...},{}]

的Jquery的提交按鈕：

$('#myform').on('submit', function(e) { 
        e.preventDefault(); 
        var myData = $('#myform').serializeArray(); 
        $.getJSON('phpscript.php', myData, function(json){ 
         var theMarkers = json; 
         // alert(JSON.stringify(json)); 
         $.each(theMarkers, function(i, val) {       
          $('#map_canvas').gmap('addMarker', { 'position': new google.maps.LatLng(val.Lat, val.Lng), 'bounds':true, 'icon':'mymarker.png' }).click(function(){        
           $('#map_canvas').gmap('openInfoWindow', { 'content': '<h1>'+val.Name+'</h1>'+'<h2 style="color: grey">'+val.Address+'</h2><p style="color: green">'+val.Telephone+'</p>' }, this); 
          });      
         }); 

        }); 
       });

來源

2012-05-29 Bob

而不是'alert（）'，使用'console.log（json）'，檢查FF中的螢火蟲，然後回報。 – Xeoncross

@Xeoncross：我喜歡你說的。在FF的Web控制檯中，我看到了過濾後的JSON數據，就像我在原始文章中作爲示例提供的那樣。 – Bob

然後下一步是在$ .each循環內查找'console.log（val）'來查看該值是什麼。我們需要確保您所期望的數據實際上是通過您的代碼實現的。你也從來沒有提到你似乎正在使用的** jQuery Google Maps Plugin **的名稱，這可能是真正的問題。 – Xeoncross

，一切工作正常。您必須在用新標記填充地圖之前調用它。

$('#map_canvas').gmap('clear', 'markers');

來源

2012-05-29 17:19:44 Bob

你一定要明白，在你的$.each功能，i是指數，而val是在當前迭代中的對象。

你肯定should'nt是val.Name，val.Address等，將訪問您的JSON對象的價值觀，另一方面i.name將可能只是目前的指數，像4.name等？

來源

2012-05-29 16:44:57 adeneo

對不起，我感到困惑。我編輯了原始文章中的源代碼以匹配我目前的文章。我確實使用'val'而不是'i'，但它仍然不會在地圖上顯示過濾/新標記。如果我將使用「i」而不是 - 我的地圖以grat顏色着色，並且無法放大/縮小，並且根本沒有標記。 – Bob

兩個想法：

（1）不要緯度和LNG真的說coord values，而不是實數？（我正在逐字閱讀評論）

（2）mymarker.png是否存在（正確路徑）並在瀏覽器中正確加載？由於我沒有這個文件，當我測試時，沒有任何東西出現，直到我將它從源文件中刪除。

我用它來測試，它工作正常，下載了最新的jquery-ui-map。我只是假設jQuery ajax部分工作正常，因爲你在控制檯輸出預期的結果。

<html> 
<head> 
<style type="text/css"> 
    html, body, #map_canvas { margin: 0; padding: 0; height: 100% } 
</style> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jqueryuimap.js"></script> 
<script type="text/javascript"> 
    var map; 
    var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2, 
    mapTypeId: google.maps.MapTypeId.ROADMAP }; 

    function initialize() { 
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
    theMarkers = [ 
     {"Name":"John Smith","Address":"123 Fake St.", 
     "Telephone":"50011111" ,"Lat":"0.0","Lng":"0.0"}, 

     {"Name":"John Smith","Address":"123 Fake St.", 
     "Telephone":"50011111" ,"Lat":"10.0","Lng":"0.0"}, 

     {"Name":"John Smith","Address":"123 Fake St.", 
     "Telephone":"50011111" ,"Lat":"20.0","Lng":"0.0"} 
    ] 

    $.each(theMarkers, function(i, val) { 
     $('#map_canvas').gmap('addMarker', 
     { 'position': new google.maps.LatLng(val.Lat, val.Lng), 
      'bounds':true }).click(function(){        
     $('#map_canvas').gmap('openInfoWindow', 
     { 'content': '<h1>'+val.Name+'</h1>'+ 
      '<h2 style="color: grey">'+val.Address+ 
      '</h2><p style="color: green">'+val.Telephone+'</p>' }, this); 
     }); 
    }); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script>

來源

2012-05-29 17:18:14

結果表明它一直有效 - 這就是爲什麼它也適用於你。事情是，我根據用戶在窗體控件中指定的內容，通過將表單數據發送到PHP腳本來過濾我的標記。然後，PHP腳本將獲取表單數據並將其應用於我的SQL語句，並將結果作爲JSON返回給我的jQuery。我只需要清理舊的標記，然後繪製新的標記，但我沒有這樣做 - 相反，我將新標記繪製在舊標記上。如果你想看到它，我已經發布了自己的答案。 – Bob

返回的JSON沒有正確的處理jQuery.each（）對谷歌地圖

回答

相關問題