【问题标题】:How to extract city, country, latitude and longitude from google places result如何从谷歌地方结果中提取城市、国家、纬度和经度
【发布时间】:2016-02-02 05:46:14
【问题描述】:

我正在使用以下 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);

【问题讨论】:

  • 不确定谁对你的问题投了反对票,这对我来说似乎完全合理。它让我难倒了一段时间,直到我弄清楚了。

标签: google-maps geolocation location google-places-api


【解决方案1】:

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

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

您需要遍历数组并提取出您需要的字段。 city 可能不存在,但 postal_townlocality 可能在这种情况下您需要使用这些值。

请记住,如果该数据不可用,您可能无法获得 citycountry 的任何值。

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

【讨论】:

  • 有没有办法使用其他插件或方法获取城市和国家/地区,除了 Google.. 之外的任何其他服务?
  • 您可以使用 Nominatim,它是基于 Open Street Map 构建的搜索引擎。 wiki.openstreetmap.org/wiki/Nominatim 该页面上有一些示例查找。谷歌和 OSM 是两个知名度最高的全球选项。英国有特定国家/地区的选项,例如我们有ordnancesurvey.co.uk/business-and-government/products/…,但我认为这是一项付费服务​​。但我很想知道为什么 Google 不适合您?
  • 进一步考虑,您还可以使用 IP 查找来获取位置。有许多服务可以提供此功能。例如,请参阅whatismyipaddress.com/ip-lookup。然而,这些数据返回准确数据的可能性远低于 Google。
  • 如果您需要在客户端脚本中执行此操作,Google Places 可能是最好的系统之一。如果您能够在服务器端做某事,您可以考虑在用户的 IP 地址上使用 geo-ip 查找。我使用 MaxMind 的免费数据库取得了不错的效果——它们的详细程度不如付费数据库,但对于城市和国家级别的数据,它们应该足够了。看看这里:maxmind.com/en/open-source-data-and-api-for-ip-geolocation Rails、Node.js 等有查找代码的实现。
【解决方案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');

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-04-30
    • 1970-01-01
    • 1970-01-01
    • 2014-06-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多