使用jQuery从Google Geocoding API中读取JSON数据 [英] Reading JSON data from Google Geocoding API with jQuery

问题描述

我正在尝试了解Google地图地理编码以及如何读取它发回的JSON数据。这是Google发回的内容：

  {
results：[
 {
 address_components：[
 {
long_name：1600，
short_name：1600，
types：[street_number] 
 $，
 {
long_name：Amphitheatre Pkwy，
short_name：Amphitheatre Pkwy，
types：[route] 
}，
 {
long_name：Mountain View，
short_name：Mountain View，
types：[locality，political ] 
，
 {
long_name：Santa Clara County，
short_name：Santa Clara County，
types：[ administrative_area_level_2，political] 
}，
 {
long_name：California，
short_name：CA，
types：[administrative_area_level_1，political] 
}，
 {
long_name：美国，， 
short_name：US，
types：[country，political] 
}，
 {
long_name：94043 ，
short_name：94043，
types：[postal_code] 
} 
]，
formatted_address：1600 Amphitheatre Parkway ，
位置：{
lat：37.4224764，
lng：-122.0842499 $ b，Mountain View，CA 94043，USA $ b $，
location_type：ROOFTOP，
viewport：{
northeast：{
lat：37.4238253802915，
lng ：-122.0829009197085 
 }，
southwest：{
lat：37.4211274197085，
lng：-122.0855988802915 
} 
} 
}，
place_id：ChIJ2eUgeAK6j4ARbn5u_wAGqWA，
types：[street_address] 
} 
]，
status：OK
} 
  

我用这段代码得到这个回应：

<$点击（函数（事件）{
var address = encodeURIComponent（$（＃location）。val（））;

$ .ajax（{
类型：GET，
网址：https://maps.googleapis.com/maps/api/geocode/json?address= + address +& sensor = false& key =+ API_KEY，
dataType：json，
success：processJSON
}）;

函数processJSON（json）{
//在这里做东西
}
}）;

问题是我不知道要在 processJSON code>。我在这里阅读教程： https://www.sitepoint.com/ajaxjquery-getjson -simple-example / 和关于 .getJSON（）的文档 http://api.jquery.com/jquery.getjson/ 。但是，我无法理解这两个网站。

如果我想获得 postal_code ，我将如何读取数据？我试过这个：
$ b $ pre $ function processJSON（json）{
//在这里做东西
alert（邮编：+ json.address_components [6] .long_name）;

$ / code>

我试着用 getJSON（）以及成功：

  $。getJSON（ url，function（json）{
 alert（Postal Code：+ json.address_components [6] .long_name）; 
}）; 
  

但是，既不警告也不警告。我究竟做错了什么？

解决方案

在youu ajax之后添加成功功能

<$ p $（$code> $（＃submit）。click（function（event）{
var address = encodeURIComponent（$（＃location）。val（））;

$ .ajax（{
类型：GET，
url：https://maps.googleapis.com/maps/api/geocode/json?address=+ address + & sensor = false& key =+ API_KEY，
dataType：json，
success：processJSON
}）。success（function（data）{
processJSON数据）;
}

函数processJSON（json）{
//在这里做的事
console.log（json）;
alert（Postal代码：+ json.results [0] .address_components [6] .long_name）;
}
}）;


I am trying to learn about Google Maps Geocoding and how to read the JSON data it sends back. This is what Google sends back:

{
   "results" : [
      {
         "address_components" : [
            {
               "long_name" : "1600",
               "short_name" : "1600",
               "types" : [ "street_number" ]
            },
            {
               "long_name" : "Amphitheatre Pkwy",
               "short_name" : "Amphitheatre Pkwy",
               "types" : [ "route" ]
            },
            {
               "long_name" : "Mountain View",
               "short_name" : "Mountain View",
               "types" : [ "locality", "political" ]
            },
            {
               "long_name" : "Santa Clara County",
               "short_name" : "Santa Clara County",
               "types" : [ "administrative_area_level_2", "political" ]
            },
            {
               "long_name" : "California",
               "short_name" : "CA",
               "types" : [ "administrative_area_level_1", "political" ]
            },
            {
               "long_name" : "United States",
               "short_name" : "US",
               "types" : [ "country", "political" ]
            },
            {
               "long_name" : "94043",
               "short_name" : "94043",
               "types" : [ "postal_code" ]
            }
         ],
         "formatted_address" : "1600 Amphitheatre Parkway, Mountain View, CA 94043, USA",
         "geometry" : {
            "location" : {
               "lat" : 37.4224764,
               "lng" : -122.0842499
            },
            "location_type" : "ROOFTOP",
            "viewport" : {
               "northeast" : {
                  "lat" : 37.4238253802915,
                  "lng" : -122.0829009197085
               },
               "southwest" : {
                  "lat" : 37.4211274197085,
                  "lng" : -122.0855988802915
               }
            }
         },
         "place_id" : "ChIJ2eUgeAK6j4ARbn5u_wAGqWA",
         "types" : [ "street_address" ]
      }
   ],
   "status" : "OK"
}

I get this response with this code:

$("#submit").click(function(event) {
  var address = encodeURIComponent($("#location").val());

  $.ajax({
    type: "GET",
    url: "https://maps.googleapis.com/maps/api/geocode/json?address=" + address + "&sensor=false&key=" + API_KEY,
    dataType: "json",
    success: processJSON
  });

  function processJSON(json) {
    // Do stuff here
  }
});

The problem is I don't know what to put inside processJSON. I was reading the tutorial here: https://www.sitepoint.com/ajaxjquery-getjson-simple-example/ and the documentation on .getJSON() on http://api.jquery.com/jquery.getjson/. However, I'm having trouble understanding both sites.

If I wanted to get the postal_code, how would I do read the data? I tried this:

function processJSON(json) {
    // Do stuff here
    alert("Postal Code:" + json.address_components[6].long_name);
  }

I tried it with getJSON() as well after success:

$.getJSON(url, function(json) {
  alert("Postal Code:" + json.address_components[6].long_name);
 });

However, neither alert anything. What am I doing wrong? Thanks in advance!

解决方案

add success function after youu ajax

$("#submit").click(function(event) {
  var address = encodeURIComponent($("#location").val());

  $.ajax({
    type: "GET",
    url: "https://maps.googleapis.com/maps/api/geocode/json?address=" + address + "&sensor=false&key=" + API_KEY,
    dataType: "json",
    success: processJSON
  }).success(function(data){
    processJSON(data);
  }

  function processJSON(json) {
    // Do stuff here
    console.log(json);
    alert("Postal Code:" + json.results[0].address_components[6].long_name);
  }
});

这篇关于使用jQuery从Google Geocoding API中读取JSON数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！