Google地图自动填充 - 获取州/省的short_name [英] Google Maps Autocomplete - Get short_name for state/province

问题描述

如何从address_components对象获取 short_name （例如加利福尼亚州的CA）？

这很适合抓住 long_name ：

  var autocomplete; 
 var componentForm = {
 locality：'long_name'，
 administrative_area_level_1：'long_name'，
 country：'long_name'
}; 
 
 var place = autocomplete.getPlace（）; 
 var addCity，addProvince，addCountry; 
 
 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]]; 
 
 if（addressType =='locality'）addCity = val; 
 if（addressType =='administrative_area_level_1'）addProvince = val; 
 if（addressType =='country'）addCountry = val; 
} 
 
} 
  

解决方案

更改：

  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'
}; 
  

到：

  var componentForm = {
 street_number：'short_name'，
 route：'long_name'，
 locality：'long_name'，
 administrative_area_level_1：'long_name'，
国家：'long_name'，
 postal_code：'short_name'
}; 
  

工作小提琴

代码段：

  //此示例使用Google Places API的自动完成功能来显示地址表单，以帮助用户填写information.var placeSearch，autocomplete; var componentForm = {street_number：'short_name'，route： 'long_name'，locality：'long_name'，administrative_area_level_1：'long_name'，country：'long_name'，postal_code：'short_name'};函数initAutocomplete（）{//创建自动完成对象，将搜索限制为地理位置类型。 autocomplete = new google.maps.places.Autocomplete（/ ** @type {！HTMLInputElement} * /（document.getElementById（'autocomplete'）），{types：['geocode']}）; //当用户从下拉列表中选择一个地址时，填写表单中的地址字段。 autocomplete.addListener（'place_changed'，fillInAddress）;} // [START region_fillform] function fillInAddress（）{//从自动填充对象中获取地点详细信息。 var place = autocomplete.getPlace（）; for（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] // [START region_geolocation] //将自动完成对象偏移到用户的地理位置，//由浏览器的'navigator.geolocation'提供object.function geolocate（）{if（navigator。地理位置）{navigator.geolocation.getCurrentPosition（function（position）{var geolocation = {lat：position.coords.latitude，lng：position.coords.longitude}; var circle = new google.maps.Circle（{center：geolocation， radius：position.coords.accuracy}）; autocomplete.setBounds（circle.getBounds（））;}）; }} // [END region_geolocation] google.maps.event.addDomListener（window，'load'，initAutocomplete）;  

 ＃locationField，＃controls {position：relative; width：480px;}＃autocomplete {position：absolute; top：0px; left：0px; width：99％;}。label {text-align：right; font-weight：bold;宽度：100px;颜色：＃303030;}＃地址{border：1px solid＃000090; background-color：＃f0f0ff; width：480px; padding-right：2px;}＃address td {font-size：10pt;}。field {width：99％;}。slimField {width：80px;}。widthField {width：200px;}＃locationField {height：20px; margin-bottom：2px;}   
 < script src = https://maps.googleapis.com/maps/api/js?libraries=places\"></script><div id =locationField> < input id =autocompleteplaceholder =输入您的地址onFocus =geolocate（）type =text>< / input>< / div>< table id =address> < TR> < td class =label>街道地址< / td> < td class =slimField> < input class =fieldid =street_numberdisabled =true>< / input> < / TD> < td class =wideFieldcolspan =2> < input class =fieldid =routedisabled =true>< / input> < / TD> < / TR> < TR> < td class =label>城市< / td> < td class =wideFieldcolspan =3> < input class =fieldid =localitydisabled =true>< / input> < / TD> < / TR> < TR> < td class =label>状态< / td> < td class =slimField> < input class =fieldid =administrative_area_level_1disabled =true>< / input> < / TD> < td class =label>邮政编码< / td> < td class =wideField> < input class =fieldid =postal_codedisabled =true>< / input> < / TD> < / TR> < TR> < td class =label>国家< / td> < td class =wideFieldcolspan =3> < input class =fieldid =countrydisabled =true>< / input> < / TD> < / table>  

How do I get the short_name (eg. CA for California) from the address_components object?

This works fine to grab the "long_name":

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

var place = autocomplete.getPlace();
var addCity, addProvince, addCountry;

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

        if(addressType == 'locality')                    addCity = val;
        if(addressType == 'administrative_area_level_1') addProvince = val;
        if(addressType == 'country')                     addCountry = val;
    }

}

解决方案

Change:

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'
};

to:

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

working fiddle

code snippet:

// 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: 'long_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: ['geocode']
    });

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

// [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]

// [START region_geolocation]
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var geolocation = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
        var circle = new google.maps.Circle({
          center: geolocation,
          radius: position.coords.accuracy
        });
        autocomplete.setBounds(circle.getBounds());
      });
    }
  }
  // [END region_geolocation]
google.maps.event.addDomListener(window, 'load', initAutocomplete);

#locationField,
#controls {
  position: relative;
  width: 480px;
}
#autocomplete {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 99%;
}
.label {
  text-align: right;
  font-weight: bold;
  width: 100px;
  color: #303030;
}
#address {
  border: 1px solid #000090;
  background-color: #f0f0ff;
  width: 480px;
  padding-right: 2px;
}
#address td {
  font-size: 10pt;
}
.field {
  width: 99%;
}
.slimField {
  width: 80px;
}
.wideField {
  width: 200px;
}
#locationField {
  height: 20px;
  margin-bottom: 2px;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div id="locationField">
  <input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text"></input>
</div>

<table id="address">
  <tr>
    <td class="label">Street address</td>
    <td class="slimField">
      <input class="field" id="street_number" disabled="true"></input>
    </td>
    <td class="wideField" colspan="2">
      <input class="field" id="route" disabled="true"></input>
    </td>
  </tr>
  <tr>
    <td class="label">City</td>
    <td class="wideField" colspan="3">
      <input class="field" id="locality" disabled="true"></input>
    </td>
  </tr>
  <tr>
    <td class="label">State</td>
    <td class="slimField">
      <input class="field" id="administrative_area_level_1" disabled="true"></input>
    </td>
    <td class="label">Zip code</td>
    <td class="wideField">
      <input class="field" id="postal_code" disabled="true"></input>
    </td>
  </tr>
  <tr>
    <td class="label">Country</td>
    <td class="wideField" colspan="3">
      <input class="field" id="country" disabled="true"></input>
    </td>
  </tr>
</table>

这篇关于Google地图自动填充 - 获取州/省的short_name的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！