google 地点自动完成 API 获取城镇和地区 (JavaScript)

google places autocomplete API get town and region (JavaScript)

我认为这是一个新问题,我有一些示例代码。

google 位置自动完成 API 的代码是:

      function initialize() {
        var input = document.getElementById('searchField');
        var options = {
        componentRestrictions: {
        country: ['uk', 'ie']
        }
      };
      var autocomplete = new google.maps.places.Autocomplete(input, options);
      google.maps.event.addListener(autocomplete, 'place_changed', 
      function() {
         var place = autocomplete.getPlace();
         var placeStreet = autocomplete.getPlace()[0];
         var place_ = place.name;
         var lat_ = place.geometry.location.lat();
         var long_ = place.geometry.location.lng();
         alert(place + ", street:  " + placeStreet + ", " + place_ + ", " + 
         lat_ + ", " + long_);

       });
     }

如何获取城镇或地区或国家/地区。因为我来自英国,所以我需要检测伦敦、地区或县 = 米德尔塞克斯和国家 = 英国等城镇。有没有办法做到这一点?以及如何找到 getPlace() 的打印输出 如何打印出 Javascript 对象。

提前致谢

***EDIT JSON.stringify(autocomplete.getPlaces()) 打印出对象,但如何提取城镇、地区、国家等

*** 编辑在我的自动完成中,我的 json 对象以不同的顺序打印出对象,因此找到第三个对象将是邮政城镇或行政区。如何按类型搜索并获取类型国家和国家或类型 postal_town 和城镇。我的 json 输出是:

1)

     {
      "address_components": [
      {
      "long_name": "12-20",
      "short_name": "12-20",
      "types": [
       "street_number"
      ]
      },
      {
      "long_name": "Wood Street",
      "short_name": "Wood St",
      "types": [
       "route"
       ]
      },
      {
       "long_name": "Walthamstow",
        "short_name": "Walthamstow",
        "types": [
        "neighborhood",
        "political"
       ]
     },
     {
      "long_name": "London",
      "short_name": "London",
       "types": [
       "postal_town"
      ]
      }, etc

2)

 {
    "address_components": [
    {
     "long_name": "London",
      "short_name": "London",
     "types": [
      "locality",
      "political"
    ]
   },
   {
  "long_name": "London",
  "short_name": "London",
  "types": [
    "postal_town"
  ]
    },
     {
        "long_name": "Greater London",
        "short_name": "Greater London",
        " types": [
        "administrative_area_level_2",
       "political"
     ]
     },

我不确定你所说的城镇和地区是什么意思,但你可以像我一样尝试以下方法来获取所选地点的城市和州

对于城镇,您可以尝试:localitysublocality_level_1 property.If locality returns 没有结果使用 sublocality_level_1,我建议两者都试

对于您可以尝试的区域:administrative_area_level_1

国家使用:country

这是 api 文档:place autocomplete api documentation

更新:

这是你应该做的:

1.First 您应该从响应

中得到 address_component
    var place = autocomplete.getPlace().address_components

    //it will give you an array of objects which has a type property.This type property holds different components of your address.Loop through it to get your desired component

    address_component = [
      {
        "long_name" : "Australia",
        "short_name": "Aus",
        "types" : ["country"]
      },
      {
        "long_name" : "Pyrmont",
        "short_name" : "Pyrmont",
        "types" : [ "locality", "political" ]
      },
      {
        "long_name" : "Council of the City of Sydney",
        "short_name" : "Sydney",
        "types" : [ "administrative_area_level_2", "political" ]
      },
      {
        "long_name" : "New South Wales",
        "short_name" : "NSW",
        "types" : [ "administrative_area_level_1", "political" ]
      }

]

你将遍历并找到你需要的类型并获得 short_name 或 long _name 并将其显示给 screen.If 你明白这一点,你很好 go.If 不是你可以问我。检查所有可用的组件 Place Details

代码:

声明一个组件映射,它将包含您只想使用的组件

   var componentMap = {
        country: 'country',
        locality: 'locality',
        administrative_area_level_1 : 'administrative_area_level_1',
    };

    for(var i = 0; i < place.length; i++){

        var types = place[i].types; // get types array of each component 

        for(var j = 0; j < types.length; j++){ // loop through the types array of each component as types is an array and same thing can be indicated by different name.As you can see in the json object above 

              var component_type = types[j];

              // check if this type is in your component map.If so that means you want this component

              if(componentMap.hasOwnProperty(component_type)){


                console.log(place[i]['long_name']);

              }
        }
    }