谷歌地方自动完成API获取城镇和地区(JavaScript)

时间:2017-11-12 04:04:22

标签: javascript autocomplete google-places-api

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

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_);

       });
     }

我如何获得城镇或地区或国家/地区。我来自英国,我需要发现伦敦,地区或县等城镇= middlesex和country = United Kingdom。反正有没有这样做?如何找到getPlace()的打印输出如何打印出Javascript对象。

提前致谢

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

***编辑在我的autocomplte中,我的json对象以不同的顺序打印出对象,因此找到第3个对象将是邮政城镇或行政区域。如何按类型搜索并获取类型国家和国家/地区或键入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"
     ]
     },

1 个答案:

答案 0 :(得分:4)

我不确定你所指的城镇和地区是什么,但你可以尝试以下方式,因为我做了一个选定的地方的城市和州

对于城镇,您可以尝试:localitysublocality_level_1属性。如果locality返回没有结果使用sublocality_level_1,我建议尝试两者

您可以尝试使用以下地区:administrative_area_level_1

并供国家/地区使用:country

这是api文档:place autocomplete api documentation

更新:

这是你应该做的:

1.首先,您应该从回复中获取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并将其显示在屏幕上。如果你理解这一点,你就可以去。如果不是你可以问我。检查所有可用的组件{ {3}}

代码:

声明一个组件地图,该地图将包含您只想使用的组件

   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']);

              }
        }
    }