从谷歌地图的反向地理编码中解析json?

4
我该如何使用Google Maps JavaScript API v3解析反向地理编码的响应?
geocoder.geocode({'latLng': latlng}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (results[0]) {
                        infowindow.setContent(results[0].formatted_address);
                        infowindow.open(map, marker);
                    }
                } 

这在弹出窗口中显示格式化的地址很好,但我试图从响应中取出其他部分,理想情况下是街道名称或路线(如果没有找到街道名称)。但是当使用 obj = JSON.parse(json); 时,我一直在控制台中收到此错误。

SyntaxError: JSON.parse:意外字符

如果是PHP,我会做很多 for each 循环。在JavaScript中是否可以做类似的操作?

这是一个示例:

{
   "results" : [
  {
     "address_components" : [
        {
           "long_name" : "131",
           "short_name" : "131",
           "types" : [ "street_number" ]
        },
        {
           "long_name" : "Stubbington Avenue",
           "short_name" : "Stubbington Ave",
           "types" : [ "route" ]
        },
        {
           "long_name" : "Portsmouth",
           "short_name" : "Portsmouth",
           "types" : [ "locality", "political" ]
        },
        {
           "long_name" : "Portsmouth",
           "short_name" : "Portsmouth",
           "types" : [ "administrative_area_level_3", "political" ]
        },
        {
           "long_name" : "Portsmouth",
           "short_name" : "Portsmouth",
           "types" : [ "administrative_area_level_2", "political" ]
        },
        {
           "long_name" : "England",
           "short_name" : "England",
           "types" : [ "administrative_area_level_1", "political" ]
        },
        {
           "long_name" : "United Kingdom",
           "short_name" : "GB",
           "types" : [ "country", "political" ]
        },
        {
           "long_name" : "PO2",
           "short_name" : "PO2",
           "types" : [ "postal_code_prefix", "postal_code" ]
        },
        {
           "long_name" : "Portsmouth",
           "short_name" : "Portsmouth",
           "types" : [ "postal_town" ]
        }
     ],
     "formatted_address" : "131 Stubbington Avenue, Portsmouth PO2, UK",
     "geometry" : {
        "location" : {
           "lat" : 50.8170795,
           "lng" : -1.0709701
        },
        "location_type" : "ROOFTOP",
        "viewport" : {
           "northeast" : {
              "lat" : 50.81842848029149,
              "lng" : -1.069621119708498
           },
           "southwest" : {
              "lat" : 50.8157305197085,
              "lng" : -1.072319080291502
           }
        }
     },
     "types" : [ "street_address" ]
  }
   ],
"status" : "OK"
}

这是我的开发页面链接,其中包含我的完整代码。

简而言之,我如何从上面的混乱中获得“Stubbington Avenue”?


“mess”是有效的对象语法。不确定为什么json.parse会失败。如果您可以将其转换为对象,则可以使用for-each循环,如此处所示:https://dev59.com/Umsy5IYBdhLWcg3wzBF4 - clancer
console.log(json) 一直提示未定义。但是如果我在页面上添加 alert(json),会弹出 [object][object] 等内容,我是不是没有正确传递它?obj = JSON.parse(results); - Rudiger Kidd
2个回答

10

您不需要对这些结果进行JSON解析,它已经是JSON格式。

要从该有效的JSON中获取“Stubbington Avenue”,您可以使用results[0].address_components[1].short_name

如果您想要通过这些地址组件构建实际地址,则可以循环遍历并查看以此方式打印出的值:

for(var i in results[0].address_components){
    console.log(results[0].address_components[i].short_name);
}

不要将它们注销,而是将它们附加到一个字符串中,或者将它们附加到一个元素中,无论您希望如何处理它们。


0

我正在使用Meteor,对于Meteor.js,在我的情况下它的工作方式有些不同

以下是在客户端和服务器端都适用的Meteor代码:

      // Client Side

      var zipcode = $('[name=zipcode]').val();

      Meteor.call('getLocationbyZipGoogleAPI', zipcode, function(error, result){
          if(error){
              console.log('error',error.reason);
          } else {
            var apidata = JSON.parse(result.content);
            var longname = apidata.results[0].address_components[3].long_name;
            var longaddress = apidata.results[0].formatted_address;
            var finaladdress = longaddress+', '+longname;
          }
      });

      // Server Method to Call API

      'getLocationbyZipGoogleAPI': function(zip_code){
          // do checks
          var apiurl = 'http://maps.googleapis.com/maps/api/geocode/json?address='+zip_code+'&sensor=true';
          var result = HTTP.get( apiurl );
          return result;
      }

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接