使用地理位置获取城市名称

IT技术 javascript html geolocation
2021-01-20 11:14:52

我设法使用基于 HTML 的地理定位来获取用户的纬度和经度。

//Check if browser supports W3C Geolocation API
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
} 
//Get latitude and longitude;
function successFunction(position) {
    var lat = position.coords.latitude;
    var long = position.coords.longitude;
}

我想显示城市名称,似乎获得它的唯一方法是使用反向地理定位 API。我阅读了 Google 的反向地理定位文档,但我不知道如何在我的网站上获取输出。

我不知道如何使用这个:"http://maps.googleapis.com/maps/api/geocode/json?latlng='+lat+','+long+'&sensor=true"在页面上显示城市名称。

我怎样才能做到这一点?

6个回答

您可以使用 Google API 做类似的事情。

请注意,您必须包含谷歌地图库才能使其正常工作。Google 地理编码器会返回许多地址组件,因此您必须对哪个将拥有该城市进行有根据的猜测。

“administrative_area_level_1”通常是您要查找的内容,但有时locality 是您所追求的城市。

无论如何 - 可以在此处此处找到有关 google 响应类型的更多详细信息

以下是应该可以解决问题的代码:

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Reverse Geocoding</title> 

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
  var geocoder;

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
} 
//Get the latitude and the longitude;
function successFunction(position) {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    codeLatLng(lat, lng)
}

function errorFunction(){
    alert("Geocoder failed");
}

  function initialize() {
    geocoder = new google.maps.Geocoder();



  }

  function codeLatLng(lat, lng) {

    var latlng = new google.maps.LatLng(lat, lng);
    geocoder.geocode({'latLng': latlng}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
      console.log(results)
        if (results[1]) {
         //formatted address
         alert(results[0].formatted_address)
        //find country name
             for (var i=0; i<results[0].address_components.length; i++) {
            for (var b=0;b<results[0].address_components[i].types.length;b++) {

            //there are different types that might hold a city admin_area_lvl_1 usually does in come cases looking for sublocality type will be more appropriate
                if (results[0].address_components[i].types[b] == "administrative_area_level_1") {
                    //this is the object you are looking for
                    city= results[0].address_components[i];
                    break;
                }
            }
        }
        //city data
        alert(city.short_name + " " + city.long_name)


        } else {
          alert("No results found");
        }
      } else {
        alert("Geocoder failed due to: " + status);
      }
    });
  }
</script> 
</head> 
<body onload="initialize()"> 

</body> 
</html> 
对于 V3,{'latlng':latlng} 字符串应更改为 'location',如 ...geocode({'location':latlng})。这个例子让我几乎到了那里,但 'latlng' 字符串在较新的 api 中似乎不再有效。请参阅:developers.google.com/maps/documentation/javascript/...了解详情。
2021-03-22 11:14:52
@Michal 我们如何才能找到国家名称或国家代码而不是完整地址?
2021-03-24 11:14:52
管理区域级别 1 并非如此,有时城市名称不存在。- {"long_name"=>"San Francisco", "types"=>["administrative_area_level_2", "political"] , "short_name"=>"San Francisco"}, {"long_name"=>"California", "types "=>["administrative_area_level_1", "political"], "short_name"=>"CA" }, {"long_name"=>"United States", "types"=>["country", "political"], " short_name"=>"美国"}
2021-03-28 11:14:52
@ajay 在 if 语句测试“国家”和城市变量现在将返回国家数据。如果重命名 country = results[0].address_components[i] 你可以通过 country.long_name 和 country.short_name 访问数据
2021-04-11 11:14:52
有没有办法将其缩小到一个省内的城市,或者只是检查位置是否来自特定省份,以及是否将用户重定向到特定网页?
2021-04-11 11:14:52

$.ajax({
  url: "https://geolocation-db.com/jsonp",
  jsonpCallback: "callback",
  dataType: "jsonp",
  success: function(location) {
    $('#country').html(location.country_name);
    $('#state').html(location.state);
    $('#city').html(location.city);
    $('#latitude').html(location.latitude);
    $('#longitude').html(location.longitude);
    $('#ip').html(location.IPv4);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div>Country: <span id="country"></span></div>
  <div>State: <span id="state"></span></div>
    <div>City: <span id="city"></span></div>
      <div>Latitude: <span id="latitude"></span></div>
        <div>Longitude: <span id="longitude"></span></div>
          <div>IP: <span id="ip"></span></div>

使用 html5 地理定位需要用户许可。如果您不想要这个,请使用像https://geolocation-db.com这样的外部定位器支持 IPv6。没有限制和无限制的请求。

例子

对于不使用 jQuery 的纯 javascript 示例,请查看答案。

非常感谢这个宝藏@OP。在 SO 上花了 1 小时后,这是我发现的第一个链接(geolocation-db.com),该服务支持每天无限制的免费 API 访问。
2021-03-21 11:14:52
它总是显示美国,但我当前的位置是阿曼。
2021-03-30 11:14:52
这不适用于最新版本的 angular (v12)。回调未定义错误。
2021-04-01 11:14:52

另一种方法是使用我的服务http://ipinfo.io,它根据用户当前的 IP 地址返回城市、地区和国家/地区名称。这是一个简单的例子:

$.get("http://ipinfo.io", function(response) {
    console.log(response.city, response.country);
}, "jsonp");

这是一个更详细的 JSFiddle 示例,它也打印出完整的响应信息,因此您可以查看所有可用的详细信息:http : //jsfiddle.net/zK5FN/2/

我可以从设备(手持)浏览器执行此操作吗?
2021-03-18 11:14:52
大声笑...这给了我的内部网络 ip (192.168 ...)
2021-03-20 11:14:52
虽然不那么准确。
2021-03-22 11:14:52
无法从俄罗斯大型提供商的 IP 中检测到城市甚至 trgion :(
2021-03-28 11:14:52
好像不太靠谱 我现在正在使用笔记本电脑和手机。通过ipinfo.io在两个设备中显示的城市相距530公里!
2021-04-03 11:14:52

您可以使用 Google Maps Geocoding API 获取城市名称、国家名称、街道名称和其他地理数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
</head>
<body>
    <script type="text/javascript">
        navigator.geolocation.getCurrentPosition(success, error);

        function success(position) {
            console.log(position.coords.latitude)
            console.log(position.coords.longitude)

            var GEOCODING = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + position.coords.latitude + '%2C' + position.coords.longitude + '&language=en';

            $.getJSON(GEOCODING).done(function(location) {
                console.log(location)
            })

        }

        function error(err) {
            console.log(err)
        }
    </script>
</body>
</html>

并使用 jQuery 在页面上显示此数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
</head>
<body>

    <p>Country: <span id="country"></span></p>
    <p>State: <span id="state"></span></p>
    <p>City: <span id="city"></span></p>
    <p>Address: <span id="address"></span></p>

    <p>Latitude: <span id="latitude"></span></p>
    <p>Longitude: <span id="longitude"></span></p>

    <script type="text/javascript">
        navigator.geolocation.getCurrentPosition(success, error);

        function success(position) {

            var GEOCODING = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + position.coords.latitude + '%2C' + position.coords.longitude + '&language=en';

            $.getJSON(GEOCODING).done(function(location) {
                $('#country').html(location.results[0].address_components[5].long_name);
                $('#state').html(location.results[0].address_components[4].long_name);
                $('#city').html(location.results[0].address_components[2].long_name);
                $('#address').html(location.results[0].formatted_address);
                $('#latitude').html(position.coords.latitude);
                $('#longitude').html(position.coords.longitude);
            })

        }

        function error(err) {
            console.log(err)
        }
    </script>
</body>
</html>

这是我更新的工作版本,它将获得城市/城镇,看起来在 json 响应中修改了一些字段。参考以前对这个问题的回答。(感谢 Michal 和另外一个参考:链接

var geocoder;

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
}
// Get the latitude and the longitude;
function successFunction(position) {
  var lat = position.coords.latitude;
  var lng = position.coords.longitude;
  codeLatLng(lat, lng);
}

function errorFunction() {
  alert("Geocoder failed");
}

function initialize() {
  geocoder = new google.maps.Geocoder();

}

function codeLatLng(lat, lng) {
  var latlng = new google.maps.LatLng(lat, lng);
  geocoder.geocode({latLng: latlng}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (results[1]) {
        var arrAddress = results;
        console.log(results);
        $.each(arrAddress, function(i, address_component) {
          if (address_component.types[0] == "locality") {
            console.log("City: " + address_component.address_components[0].long_name);
            itemLocality = address_component.address_components[0].long_name;
          }
        });
      } else {
        alert("No results found");
      }
    } else {
      alert("Geocoder failed due to: " + status);
    }
  });
}