如何从Google Places API获取国家/地区代码 [英] How to get the country code from Google Places API

问题描述

我尝试使用HTML 5 GeoLocation获取经度和纬度，然后使用Google Maps API 获取该经度/纬度的国家代码。有没有更简单的方法从谷歌地方api获取国家代码？

我从这个链接找到了解决方案==> 获取国家/地区代码
获取国家/地区代码。

有没有办法直接从谷歌API位置获取国家代码，而无需首先获取纬度和经度，然后传递到谷歌地图API。

这是我用来从谷歌地点api获取国家代码的以下脚本

 < ;脚本> 
 //此示例使用Google Places API的自动填充功能
 //来显示地址表单，以帮助用户填写信息。 
 
 var placeSearch，autocomplete; 
 var componentForm = {
 street_number：'short_name'，
 route：'long_name'，
 locality：'long_name'，
 administrative_area_level_1：'short_name'，
国家：'long_name'，
 postal_code：'short_name'
}; 
 
函数initAutocomplete（）{
 //创建自动填充对象，将搜索限制为地理区域
 //位置类型。 
 autocomplete = new google.maps.places.Autocomplete（
 / ** @type {！HTMLInputElement} * /（document.getElementById（'autocomplete'）），
 {types：[' （市）']}）; 
 
 //当用户从下拉列表中选择一个地址时，填写表单中的地址
 //字段。 
 //autocomplete.addListener('place_changed'，fillInAddress）; 
 
 //获取经度和纬度
 
 google.maps.event.addListener（autocomplete，'place_changed'，function（）{
 var place = autocomplete.getPlace （）; 
 //document.getElementById('city2').value = place.name; 
 document.getElementById（'lat'）。value = place.geometry.location.lat（）; 
 document.getElementById（'lng'）。value = place.geometry.location.lng（）; 
 
}）; 
} 
 
 // [START region_fillform] 
函数fillInAddress（）{
 //从自动完成对象中获取地点详细信息。 
 var place = autocomplete.getPlace（）; 
 
（componentForm中的var组件）{
 document.getElementById（component）.value =''; 
 document.getElementById（component）.disabled = false; 
} 
 
 //从地点详细信息
 //获取地址的每个组成部分，然后填写表单上相应的字段。 
 for（var i = 0; i< place.address_components.length; i ++）{
 var addressType = place.address_components [i] .types [0]; 
 if（componentForm [addressType]）{
 var val = place.address_components [i] [componentForm [addressType]]; 
 document.getElementById（addressType）.value = val; 
} 
} 
} 
 // [END region_fillform] 
 
< / script> 
< script src =https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places&callback=initAutocomplete
 async defer>< /脚本> 
  

解决方案

要获取国家/地区代码，地址组件的类型为 country ：

  //为该国家/ （addressType ==country）{
 document.getElementById（country_code）。value = place.address_components [i] .short_name;}获取国家代码（简称）也是
。 
 
  

程式码片段：

  //此示例使用Google Places API的自动完成功能来帮助用户填写information.function fillInAddress（）{//从自动填充对象获取地点详细信息。 var place = autocomplete.getPlace（）; for（componentForm中的var组件）{document.getElementById（component）.value =''; } //从地点详细信息中获取地址的每个组成部分//并填充表单上的相应字段。 for（var i = 0; i< place.address_components.length; i ++）{var addressType = place.address_components [i] .types [0]; if（componentForm [addressType]）{var val = place.address_components [i] [componentForm [addressType]]; document.getElementById（addressType）.value = val; } //对于国家，获取国家代码（简称）也如果（addressType ==country）{document.getElementById（country_code）。value = place.address_components [i] .short_name; }}} var placeSearch，autocomplete; var componentForm = {locality：'long_name'，administrative_area_level_1：'short_name'，country：'long_name'，}; function initAutocomplete（）{//创建自动完成对象，将搜索限制为地理/ /位置类型。 autocomplete = new google.maps.places.Autocomplete（/ ** @type {！HTMLInputElement} * /（document.getElementById（'autocomplete'）），{types：['（cities）']}）; //当用户从下拉列表中选择一个地址时，填写表单中的地址字段。 //获取纬度和经度google.maps.event.addListener（autocomplete，'place_changed'，function（）{var place = autocomplete.getPlace（）; document.getElementById（'lat'）.value = place.geometry.location。 lat（）; document.getElementById（'lng'）。value = place.geometry.location.lng（）; fillInAddress（）;}）;} google.maps.event.addDomListener（window，'load'，initAutocomplete）;  

html，body {height：100％;保证金：0; padding：0;}＃map {height：100％;}

< script src =https://maps.googleapis.com/maps/api/js?libraries=places>< / script>< div id =locationField> < input id =autocompleteplaceholder =输入您的地址type =text/>< / div>< table id =address> < TR> < td class =label>城市< / td> < td class =wideFieldcolspan =3> < input class =fieldid =localitydisabled =true/> < / TD> < / TR> < TR> < td class =label>状态< / td> < td class =slimField> < input class =fieldid =administrative_area_level_1disabled =true/> < / TD> < / TR> < TR> < td class =label>国家< / td> < td class =wideFieldcolspan =2> < input class =fieldid =countrydisabled =true/> < / TD> < td class =label>国家代码< / td> < td class =shortField> < input class =fieldid =country_codedisabled =true/> < / TD> < / TR> < TR> < td class =label>纬度< / td> < td class =wideFieldcolspan =3> < input class =fieldid =latdisabled =true/> < / TD> < / TR> < TR> < td class =label>经度< / td> < td class =wideFieldcolspan =3> < input class =fieldid =lngdisabled =true/> < / TD> < / table>

I am trying to use HTML 5 GeoLocation to get longitude and latitude and then use Google Maps API to get the country code of that longitude/latitude. Is there any simpler way to get country code from google places api?

I found the solution from this link ==> Getting country code from Google Maps and HTML 5 GeoLocation to get the country code.

Is there way to get country code directly from google places api without getting latitude and longitude first and then passing to google maps api.

This is the following script that I am using to get the country code from google places api

<script>
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.

var placeSearch, autocomplete;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'
};

function initAutocomplete() {
  // Create the autocomplete object, restricting the search to geographical
 // location types.
  autocomplete = new google.maps.places.Autocomplete(
  /** @type {!HTMLInputElement}     */(document.getElementById('autocomplete')),
  {types: ['(cities)']});

  // When the user selects an address from the dropdown, populate the address
  // fields in the form.
  //autocomplete.addListener('place_changed', fillInAddress);

// Get Latitude and longitude

  google.maps.event.addListener(autocomplete, 'place_changed', function () {
        var place = autocomplete.getPlace();
        //document.getElementById('city2').value = place.name;
        document.getElementById('lat').value = place.geometry.location.lat();
        document.getElementById('lng').value = place.geometry.location.lng();

    });
}

// [START region_fillform]
function fillInAddress() {
 // Get the place details from the autocomplete object.
 var place = autocomplete.getPlace();

  for (var component in componentForm) {
   document.getElementById(component).value = '';
   document.getElementById(component).disabled = false;
  }

  // Get each component of the address from the place details
 // and fill the corresponding field on the form.
 for (var i = 0; i < place.address_components.length; i++) {
   var addressType = place.address_components[i].types[0];
   if (componentForm[addressType]) {
    var val = place.address_components[i][componentForm[addressType]];
    document.getElementById(addressType).value = val;
  }
  }
  }
  // [END region_fillform]

</script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places&callback=initAutocomplete"
    async defer></script>

解决方案

To get the country code, get the short name of the address component with type country:

// for the country, get the country code (the "short name") also
if (addressType == "country") {
  document.getElementById("country_code").value = place.address_components[i].short_name;
} 

code snippet:

// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.

function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

  for (var component in componentForm) {
    document.getElementById(component).value = '';
  }

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
    // for the country, get the country code (the "short name") also
    if (addressType == "country") {
      document.getElementById("country_code").value = place.address_components[i].short_name;
    }
  }
}

var placeSearch, autocomplete;
var componentForm = {
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
};

function initAutocomplete() {
  // Create the autocomplete object, restricting the search to geographical
  // location types.
  autocomplete = new google.maps.places.Autocomplete(
    /** @type {!HTMLInputElement}     */
    (document.getElementById('autocomplete')), {
      types: ['(cities)']
    });

  // When the user selects an address from the dropdown, populate the address
  // fields in the form.
  // Get Latitude and longitude
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    var place = autocomplete.getPlace();
    document.getElementById('lat').value = place.geometry.location.lat();
    document.getElementById('lng').value = place.geometry.location.lng();
    fillInAddress();
  });
}
google.maps.event.addDomListener(window, 'load', initAutocomplete);

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div id="locationField">
  <input id="autocomplete" placeholder="Enter your address" type="text" />
</div>
<table id="address">
  <tr>
    <td class="label">City</td>
    <td class="wideField" colspan="3">
      <input class="field" id="locality" disabled="true" />
    </td>
  </tr>
  <tr>
    <td class="label">State</td>
    <td class="slimField">
      <input class="field" id="administrative_area_level_1" disabled="true" />
    </td>
  </tr>
  <tr>
    <td class="label">Country</td>
    <td class="wideField" colspan="2">
      <input class="field" id="country" disabled="true" />
    </td>
    <td class="label">Country Code</td>
    <td class="shortField">
      <input class="field" id="country_code" disabled="true" />
    </td>
  </tr>
  <tr>
    <td class="label">latitude</td>
    <td class="wideField" colspan="3">
      <input class="field" id="lat" disabled="true" />
    </td>
  </tr>
  <tr>
    <td class="label">longitude</td>
    <td class="wideField" colspan="3">
      <input class="field" id="lng" disabled="true" />
    </td>
  </tr>
</table>

这篇关于如何从Google Places API获取国家/地区代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！