Question

我使用以下Google商家信息脚本来获取用户的位置。我得到了完整的地址，但我需要解析结果以获得城市，国家。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Google Places Autocomplete textbox using google maps api</title>
</head>
<body>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', initialize);
function initialize() {
    var autocomplete = new google.maps.places.Autocomplete(document.getElementById('txtAutocomplete'));
    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        var place = autocomplete.getPlace();
        var location = "<b>Address</b>: " + place.formatted_address + "<br/>";
        location += "<b>Latitude</b>: " + place.geometry.location.lat() + "<br/>";
        location += "<b>Longitude</b>: " + place.geometry.location.lng();
        document.getElementById('lblResult').innerHTML = location;
    });
}
</script>
<span>Location:</span>
<input type="text" id="txtAutocomplete" style="width: 300px"     placeholder="Enter your address" /><br /><br />
<label id="lblResult" />
</body>
</html>

我已尝试过以下脚本，但它并不是一直有效，因为在某些情况下，地址格式不同。

var city = place.address_components[0] && place.address_components[0].short_name || '';
        document.getElementById('lblResult').innerHTML = location;
        console.log(city);

Answer 1

如果您查看console.log(place);，您会看到类似......

的内容

返回的对象包含address_components。这是一个根据可用数据创建的数组，因此您无法保证它将包含哪些字段。有关返回内容的更多详细信息，请参阅description of the Google Places API Web Service。

您需要遍历数组并提取所需的字段。 city可能不存在postal_town或locality，在这种情况下，您可能会想要使用这些值。

请注意，如果该数据不可用，您可能无法获得city或country的任何值。

Google Developers网站上有一些sample code可以满足您的大部分需求。

Answer 2

我喜欢使用Lodash，因为它可以在缺少属性时提供对错误的防御，或者传入的值不是预期的类型。

虽然我确信有更优雅的方式，但我开发了这种从Google地方信息中提取某些信息的方法：

ES5版本Fiddle：

var address = place.address_components;
var city, state, zip;
address.forEach(function(component) {
  var types = component.types;
  if (types.indexOf('locality') > -1) {
    city = component.long_name;
  }

  if (types.indexOf('administrative_area_level_1') > -1) {
    state = component.short_name;
  }

  if (types.indexOf('postal_code') > -1) {
    zip = component.long_name;
  }
});

var lat = place.geometry.location.lat;
var lng = place.geometry.location.lng;

利用Lodash：

var address = _.get(place, 'address_components');
var city, state, zip;
_.forEach(address, function (component) {
    let types = _.get(component, 'types');
    if (_.includes(types, 'locality')) {
        city = _.get(component, 'long_name');
    }

    if (_.includes(types, 'administrative_area_level_1')) {
        state = _.get(component, 'short_name');
    }

    if (_.includes(types, 'postal_code')) {
        zip = _.get(component, 'long_name');
    }
});

var lat = _.get(place, 'geometry.location.lat');
var lng = _.get(place, 'geometry.location.lng');

如何从谷歌地方提取城市，国家，经度和经度结果

2 个答案: