11

我正在使用带有地理编码的谷歌地方 API。我对地址组件类型有疑问。

我想获取有关用户以这种格式输入自动完成的地址的信息：
街道号码/街道/城市/省/国家。

如果用户自动完成“Street 12, SomeCity, SomeProvince, SomeCountry”，我想在警报中返回所有这些信息。但是当用户只输入“someProvince, SomeCountry”时，我只想输入省和国家地址类型。

这是我的代码：

google.maps.event.addListener(autocomplete, 'place_changed', function () {
    var place = autocomplete.getPlace();
    alert('0: ' + place.address_components[0].long_name);
    alert('1: ' + place.address_components[1].long_name);
    alert('2: ' + place.address_components[2].long_name);
    alert('3: ' + place.address_components[3].long_name);
    alert('4: ' + place.address_components[4].long_name);
    alert('5: ' + place.address_components[5].long_name);
    alert('6: ' + place.address_components[6].long_name);
    alert('7: ' + place.address_components[7].long_name);
)};

问题是当用户自动完成完整地址时，它会正确显示所有这些警报。但是，当仅自动完成部分信息（仅国家/地区）时，它将显示 7 次键入的国家/地区。

http://gmaps-samples-v3.googlecode.com/svn/trunk/places/autocomplete-addressform.html

我想要，当没有给出街道和城市时，它会显示警报（“街道为空”等）。怎么做？

4

7 回答 7

12

为一个项目制作了这个功能。它解析

  • 街道
  • 数字
  • 国家
  • 压缩
  • 城市

来自谷歌地理响应

function parseGoogleResponse(components) {
    _.each(components, function(component) {
      _.each(component.types, function(type) {
        if (type === 'route') {
          $("input[name=street]").val(component.long_name)
        }
        if (type === 'street_number') {
          $("input[name=nr]").val(component.long_name)
        }
        if (type === 'locality') {
          $("input[name=city]").val(component.long_name)
        }
        if (type === 'country') {
          $("input[name=country]").val(component.long_name)
        }
        if (type === 'postal_code') {
          $("input[name=zip]").val(component.long_name)
        }
      })
    })
  }
于 2014-08-05T14:53:08.993 回答
11

地址类型和地址组件类型

使用这些类型并将它们映射到您的地址字段。请记住，城市、县、州等可能具有不同的含义，具体取决于它们的上下文。例如，North Hollywood提出类型neighborhood，因为它位于洛杉矶（'locality'）。

function placeToAddress(place){
        var address = {};
        place.address_components.forEach(function(c) {
            switch(c.types[0]){
                case 'street_number':
                    address.StreetNumber = c;
                    break;
                case 'route':
                    address.StreetName = c;
                    break;
                case 'neighborhood': case 'locality':    // North Hollywood or Los Angeles?
                    address.City = c;
                    break;
                case 'administrative_area_level_1':     //  Note some countries don't have states
                    address.State = c;
                    break;
                case 'postal_code':
                    address.Zip = c;
                    break;
                case 'country':
                    address.Country = c;
                    break;
                /*
                *   . . . 
                */
            }
        });

        return address;
    }
于 2016-05-19T22:07:36.333 回答
6

根据演示，您需要检查每个返回的地址组件以查看是否已返回街道/城市：

google.maps.event.addListener(autocomplete, 'place_changed', function() {
    var place = autocomplete.getPlace();
    var components = place.address_components;
    var street = null;
    for (var i = 0, component; component = components[i]; i++) {
        console.log(component);
        if (component.types[0] == 'route') {
            street = component['long_name'];
        }
    }
    alert('Street: ' + street);
});
于 2012-12-07T05:18:17.123 回答
3

为AngularJS制作了这个功能：

function getAddressComponentByPlace(place) {
    var components;

    components = {};

    angular.forEach(place.address_components, function(address_component) {
        angular.forEach(address_component.types, function(type) {
            components[type] = address_component.long_name;
        });
    });

    return components;
}

结果如下所示：

administrative_area_level_1: "Berlin"
country: "Deutschland"
locality: "Berlin"
political: "Deutschland"
postal_code: "10719"
route: "Kurfürstendamm"
street_number: "1"
sublocality: "Bezirk Charlottenburg-Wilmersdorf"
sublocality_level_1: "Bezirk Charlottenburg-Wilmersdorf"

ES6 版本

  const parseGoogleAddressComponents = (addressComponents) => {
    let components = {};
    addressComponents.forEach((addressComponent) => {
      addressComponent.types.forEach((type) => {
        components[type] = addressComponent.long_name;
      });
    });
  
    return components;
  };
于 2017-03-20T12:03:48.363 回答
1

这是一个简单的建议：

function parseGoogleResponse (components) {
  var newComponents = {}, type;
  $.each(components, function(i, component) {
    type = component.types[0];
    newComponents[type] = {
      long_name: component.long_name,
      short_name: component.short_name
    }
  });
  return newComponents;
}

用法将是：

var components = parseGoogleResponse( places[0].address_components );

于 2018-02-05T13:35:33.340 回答
1

google.maps.GeocoderAddressComponent我用纯Javascript编写了这个函数来从对象中获取相应的类型

//gets "street_number", "route", "locality", "country", "postal_code"
function getAddressComponents(components, type) {    

    for (var key in components) {
        if (components.hasOwnProperty(key)) {            

            if (type == components[key].types[0]) {
                return components[key].long_name;
            }  
        }        
    }
}
于 2017-09-15T23:25:24.593 回答
0

简单的 ES6 版本：

const addComponents = gPlaceObj?.place?.address_components

然后使用 a 选择您想要的每个组件filter：

const country = addComponents.filter(x => x?.types?.includes('country'))[0];

这会给你这个console.log(country)：

{"long_name": "United States", "short_name": "US", "types": ["country", "political"]}

于 2021-12-10T21:57:24.790 回答