【问题标题】:How can I get only the city name from geocoder?如何从地理编码器中仅获取城市名称?
【发布时间】:2019-06-14 12:39:32
【问题描述】:

我是 javascript 的初学者。 我正在构建一个应用程序并决定实现一些地理定位功能,主要是向用户显示他当前的位置。 我做到了,但我的函数返回一个完整的地址(如街道、号码、社区、城市、邮政编码和国家) 这就是到目前为止所做的......

/* CURRENT LOCATION */
function geolocationSuccess(position) {
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;

  var geocoder = new google.maps.Geocoder();
  var latlng = {lat: latitude, lng: longitude};

  geocoder.geocode({'location': latlng}, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      if (results[0]){
        var user_address = results[0].formatted_address;
        document.getElementById("current_location").innerHTML = user_address;
      }else {
        console.log('No results found for these coords.');
      }
    }else {
      console.log('Geocoder failed due to: ' + status);
    }
  });
}

function geolocationError() {
  console.log("please enable location for this feature to work!");
}

$(document).ready(function() {
  if ("geolocation" in navigator) {
    navigator.geolocation.getCurrentPosition(geolocationSuccess, geolocationError);
  } else {
    alert("Geolocation not supported!");
  }
});

我怎样才能只显示城市?

【问题讨论】:

    标签: javascript geolocation google-geocoder


    【解决方案1】:

    因为您要返回完整地址:

    var user_address = results[0].formatted_address;
    

    相反,您需要遍历地址组件并找到locality:

    var user_city = results[0].address_components.filter(ac=>~ac.types.indexOf('locality'))[0].long_name
    

    此处显示数据结构:https://developers.google.com/maps/documentation/geocoding/intro

    【讨论】:

    • 只是另一件事,拜托......这个错误是什么“未捕获的类型错误:无法读取未定义的属性'long_name'”?我的猜测是我超过了一天的请求限制,现在它什么都没有返回
    • @EdiJunior - 很可能是这样,是的。您可以注册一个付费的 api 密钥,它将继续工作。
    【解决方案2】:

    结果具有address_components 属性。它包含城市、邮编等...

    例如在官方文档中,这是address_components的内容:

    [
                {
                   "long_name" : "1600",
                   "short_name" : "1600",
                   "types" : [ "street_number" ]
                },
                {
                   "long_name" : "Amphitheatre Pkwy",
                   "short_name" : "Amphitheatre Pkwy",
                   "types" : [ "route" ]
                },
                {
                   "long_name" : "Mountain View",
                   "short_name" : "Mountain View",
                   "types" : [ "locality", "political" ]
                },
                {
                   "long_name" : "Santa Clara County",
                   "short_name" : "Santa Clara County",
                   "types" : [ "administrative_area_level_2", "political" ]
                },
                {
                   "long_name" : "California",
                   "short_name" : "CA",
                   "types" : [ "administrative_area_level_1", "political" ]
                },
                {
                   "long_name" : "United States",
                   "short_name" : "US",
                   "types" : [ "country", "political" ]
                },
                {
                   "long_name" : "94043",
                   "short_name" : "94043",
                   "types" : [ "postal_code" ]
                }
             ]
    

    例如,如果你想得到locality,就这样做

     result[0].address_components.filter(address => address.types.includes('locality'))[0].long_name
    

    【讨论】:

    • locality 并不总是第三项。你需要循环并找到它。
    猜你喜欢
    • 2020-05-14
    • 2012-05-07
    • 1970-01-01
    • 2016-02-10
    • 2011-09-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多