Google Places自动完成API获取城镇和地区(JavaScript) [英] google places autocomplete API get town and region (JavaScript)

查看:160
本文介绍了Google Places自动完成API获取城镇和地区(JavaScript)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

google place自动完成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和国家=英国等城镇.反正有这样做吗?以及如何找到getPlace()的打印输出.如何获得Javascript对象的打印输出.

预先感谢

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

***编辑在我的自动完成程序中,我的json对象以不同的顺序打印对象,因此找到第三个对象将是邮政镇或行政区域.如何按类型搜索并获取国家(地区)和国家(地区)或输入postal_town和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属性.如果locality没有返回结果,请使用sublocality_level_1,我建议同时尝试

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

并且供国家使用:country

以下是api文档:地方自动填充api文档

更新:

这是您应该做的:

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并将其显示在屏幕上.如果您了解这一点,那么就很好了.如果没有,可以问我.检查所有可用的组件位置详细信息

代码:

声明一个组件图,该图将容纳您仅想使用的组件

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

              }
        }
    }

I think this is a new question and I have some example code.

The code for google places autocomplete API is:

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

       });
     }

How do I get the town or region or country. As I'm from the UK, I need to detect town such as london, region or county = middlesex and country = United Kingdom. Is there anyway to do this? and how do I find the printout of getPlace() how do I get the Javascript object printed out.

Thanks in advance

***EDIT JSON.stringify(autocomplete.getPlaces()) prints out the object but how do I extract town, region, country etc.

*** EDIT In my autocomplte my json object prints out objects in different orders so finding the 3 rd object will be postal town or administrative area. How do I search by type and get type country and the country or type postal_town and town. My json outputs are:

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"
     ]
     },

解决方案

I am not sure what you meant by town and region but you may try the following as i did to get city and state of a selected place

for town you can try : locality or sublocality_level_1 property.If locality returns no result use sublocality_level_1, I suggest try both

and for region you may try : administrative_area_level_1

and for country use : country

Here's the api documentation : place autocomplete api documentation

Update :

Here's what you should do :

1.First you should get the address_component from response

    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" ]
      }

]

you will loop through and find the types you need and get short_name or long _name and show it to the screen.If you understand this, you are good to go.If not you can ask me .Check all the components available Place Details

CODE :

declare a component map which will house the components you want to use only

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

              }
        }
    }

这篇关于Google Places自动完成API获取城镇和地区(JavaScript)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆