谷歌地图自动完成 - 获取州/省的短名称

Question

如何从 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;
    }

}

（来自this example in the documentation的代码）

Answer 1

变化：

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',
  country: 'long_name',
  postal_code: 'short_name'
};

working fiddle

代码 sn-p：

// 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&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></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>

Answer 2

另一种使用 JS 数组方法的方法，IMO 比带有嵌套 if 语句的 for 循环更具可读性：

const city = address_components.find(item => item.types.includes('locality'))
const province = address_components.find(item => item.types.includes('administrative_area_level_1'))
const country = address_components.find(item => item.types.includes('country'))

const addCity = city.long_name
const addProvince = province.short_name
const addCountry = country.long_name

Answer 3

谢谢！我没有更改componentForm，而是添加了：

place.address_components[i].short_name;

这是修改后的 IF 语句：

if (componentForm[addressType]) {

    var val =       place.address_components[i][componentForm[addressType]];
    var valShort =  place.address_components[i].short_name;

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


    if(addressType == 'administrative_area_level_1'){

        addProvinceShort = valShort;
    }

}