使用google動態變量api http請求

Question

表單設置爲將正在收集的用戶輸入放入地址變量。 使用jQuery序列化每個url的地址要求。 jquery serialize 使用getJSON發送請求到谷歌地理編碼api。 在for循環中使用for循環來遍歷結果。 最後，訪問JSON結果。

問題：爲什麼我收到undefined？

代碼：

$(function() { 
    var address = document.getElementById('address').value; 
    address += " "+document.getElementById('street_add').value; 
    address += " "+document.getElementById('city').value; 
    address += " "+document.getElementById('state').value; 
    address += " "+document.getElementById('postcode').value; 

    $('#clickme').click(function() { 
     var strAddress = $("address").serialize(); 
     // data is an object containing info also called a map key/values 
     $.getJSON("http://maps.googleapis.com/maps/api/geocode/json?address=strAddress&sensor=false", function(data) { 
      for (var i = 0; i <= data.length; i++) { 
       for (key in data.results[i]) { 
        var mystring = data.results[0].formatted_address; 
        var mylat = data.results[0].geometry.location.lat; 
        var mylng = data.results[0].geometry.location.lng; 
       } 
      } 

      $("<ul/>", { 
       "class": "zombies", 
       html: document.write(mystring,'<hr />', mylat, '<hr />', mylng), 
      }).appendTo("body"); 
     }); 
    }); 
}); 

Answer 1

首先，你需要的address值追加到URL字符串。

其次，您將document.write的返回值分配給新的ul元素的html屬性。 document.write不會返回任何內容，因此您看到undefined。

此外，您正在循環通過data.results但每次迭代只檢索第一項，因此for是多餘的。試試這個。

$.getJSON("http://maps.googleapis.com/maps/api/geocode/json?address=" + strAddress + "&sensor=false", function(data) { 
    var mystring = data.results[0].formatted_address; 
    var mylat = data.results[0].geometry.location.lat; 
    var mylng = data.results[0].geometry.location.lng; 

    $("<ul/>", { 
     "class": "zombies", 
     html: mystring + '<hr />' + mylat + '<hr />' + mylng), 
    }).appendTo("body"); 
});