Question

我正在创建一个简单的网页，其中将地址作为输入，并使用Google geocode api返回该地址的纬度和经度。我无法处理结果。我想选择特定元素，即来自谷歌的响应中返回的JSON的纬度和经度。请帮助我，我是JSON的新手。这是JSON：

    {
  "results" : [
    {
      "address_components" : [
        {
          "long_name" : "Jabalpur",
          "short_name" : "Jabalpur",
          "types" : [ "locality", "political" ]
        },
        {
          "long_name" : "Jabalpur",
          "short_name" : "Jabalpur",
          "types" : [ "administrative_area_level_2", "political" ]
        },
        {
          "long_name" : "Madhya Pradesh",
          "short_name" : "MP",
          "types" : [ "administrative_area_level_1", "political" ]
        },
        {
          "long_name" : "India",
          "short_name" : "IN",
          "types" : [ "country", "political" ]
        },
        {
          "long_name" : "482001",
          "short_name" : "482001",
          "types" : [ "postal_code" ]
        }
      ],
      "formatted_address" : "Jabalpur, Madhya Pradesh 482001, India",
      "geometry" : {
        "bounds" : {
          "northeast" : {
            "lat" : 23.246354,
            "lng" : 80.08003219999999
          },
          "southwest" : {
            "lat" : 23.1050362,
            "lng" : 79.85747339999999
          }
        },
        "location" : {
          "lat" : 23.181467,
          "lng" : 79.98640709999999
        },
        "location_type" : "APPROXIMATE",
        "viewport" : {
          "northeast" : {
            "lat" : 23.246354,
            "lng" : 80.08003219999999
          },
          "southwest" : {
            "lat" : 23.1050362,
            "lng" : 79.85747339999999
          }
        }
      },
      "place_id" : "ChIJfam2DxqugTkRueNDvBYGAkQ",
      "types" : [ "locality", "political" ]
    }
  ],
  "status" : "OK"
}

和我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Geocode</title>
</head>
<body>
Enter Address<input type="text" id="UserInput">
Go<input type="button" onclick="geoCode()">

<script>

    function geoCode(){

        var UserInput =  document.getElementById('UserInput').valueOf();
        var xmlhttp = new XMLHttpRequest();
        var ApiKey = 'AIzaSyDZP2E_5LLE6VOwIbrNImS32sAx5rsgEbU';
        var myArr;

        var url = 'https://maps.googleapis.com/maps/api/geocode/json?address='+UserInput.value+'&key='+ApiKey;

        var xhr = new XMLHttpRequest();
        xhr.open('GET',url,true);
        xhr.send();

        xhr.onreadystatechange = processRequest;

        function processRequest() {
            if(xhr.readyState==4 && xhr.status==200)
            {
                var response = JSON.parse(xhr.responseText);
                alert(response["results"][0][0]);
            }
        }
    }

我尝试了JSON.stringify()但它会从响应中吐出所有数据。如何从JSON中选择一个特定元素？请帮忙

Answer 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Geocode</title>
</head>
<body>
Enter Address<input type="text" id="UserInput">
Go<input type="button" onclick="geoCode()">

<script>

    function geoCode(){

        var UserInput =  document.getElementById('UserInput').valueOf();
        var xmlhttp = new XMLHttpRequest();
        var ApiKey = 'AIzaSyDZP2E_5LLE6VOwIbrNImS32sAx5rsgEbU';
        var myArr;

        var url = 'https://maps.googleapis.com/maps/api/geocode/json?address='+UserInput.value+'&key='+ApiKey;

        var xhr = new XMLHttpRequest();
        xhr.open('GET',url,true);
        xhr.send();

        xhr.onreadystatechange = processRequest;

        function processRequest() {
            if(xhr.readyState==4 && xhr.status==200)
            {
                var response = JSON.parse(xhr.responseText);
              alert(response.results[0].geometry.location.lat + " " + response.results[0].geometry.location.lng);
            }
        }
    }

使用javascript进行JSON解析返回[object Object]

1 个答案: