如何从谷歌地点搜索结果中提取城市、国家、纬度和经度

Question

如何从谷歌地点搜索结果中提取城市、国家、纬度和经度

google-mapsgeolocationlocationgoogle-places-api

6

我正在使用以下 Google Places 脚本来获取用户的位置。我已经获得了完整的地址，但我需要解析结果以获取城市和国家。

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

- Stacy J

1

不确定是谁给你的问题投了反对票，我觉得它很合理。之前我也被这个问题难住了一段时间，直到我弄明白了。 - dwkns

2个回答

4

我喜欢使用Lodash，因为它可以防止属性丢失或传入的值类型不符合预期时出现错误。

虽然我相信有更优雅的方法，但我已经开发了这种从Google Places信息中提取特定信息的方法：

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

- random_user_name

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dwkns · Accepted Answer

如果您查看 console.log(place);，您会看到类似于...的东西。

返回结果:

返回的对象包含address_components。这是一个数组，它是从可用数据创建的，因此不能保证它将包含哪些字段。有关返回内容的详细信息，可以在Google Places API Web Service的描述中找到。

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

请记住，如果该数据不可用，则可能无法获取city或country的任何值。

Google开发者网站上有一些示例代码，可以实现大部分您需要的功能。