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

在本文中，我们将学习如何使用反向地理编码获取用户的城市名称。我们将使用第 3 方 API 服务提供商（Location IQ）来帮助我们将收到的纬度和经度转换为地址。

脚步：

1. 获取用户坐标。
2. 获取城市名称。

注意： LocationIQ 帐户需要获取 API 令牌。

index.html获取用户坐标。

• Geolocation 接口允许我们获取用户设备的位置。
• Geolocation.getCurrentPosition() 帮助我们确定用户的位置并返回带有所需数据的 Geoposition 对象。

索引.html

    
    
    Geolocation - City


    
    

JavaScript 文件包含两个函数， getCoordinates() & getCity()

1. getCoordinates()函数：
   • Geolocation 接口允许我们获取用户设备的位置。
   • Geolocation.getCurrentPosition() 帮助我们确定用户的位置并返回带有所需数据的 Geoposition 对象。
   • 有关使用 JS 进行地理定位的完整信息，请参阅此链接。
2. getCity()函数：
   • 我们需要一个LocationIQ令牌才能继续。
   • XMLHttpRequest (XHR) 是一个 API 对象，其方法允许我们在 Web 浏览器和 Web 服务器之间传输数据。
   • 尽管名称如此，它也可以与 HTTP 和其他协议一起使用。并且要检索的数据不仅可以是 XML，还可以是 JSON、HTML 或纯文本。
   • xhr.readyState == 4 && xhr.status == 200表示数据接收和加载正确。
   • 由于我们接收到的数据是一个 JSON 对象，我们可以使用点表示法来获取属性的值。

脚本.js

// Step 1: Get user coordinates
function getCoordintes() {
    var options = {
        enableHighAccuracy: true,
        timeout: 5000,
        maximumAge: 0
    };
  
    function success(pos) {
        var crd = pos.coords;
        var lat = crd.latitude.toString();
        var lng = crd.longitude.toString();
        var coordinates = [lat, lng];
        console.log(`Latitude: ${lat}, Longitude: ${lng}`);
        getCity(coordinates);
        return;
  
    }
  
    function error(err) {
        console.warn(`ERROR(${err.code}): ${err.message}`);
    }
  
    navigator.geolocation.getCurrentPosition(success, error, options);
}
  
// Step 2: Get city name
function getCity(coordinates) {
    var xhr = new XMLHttpRequest();
    var lat = coordinates[0];
    var lng = coordinates[1];
  
    // Paste your LocationIQ token below.
    xhr.open('GET', "
https://us1.locationiq.com/v1/reverse.php?key=YOUR_PRIVATE_TOKEN&lat=" +
    lat + "&lon=" + lng + "&format=json", true);
    xhr.send();
    xhr.onreadystatechange = processRequest;
    xhr.addEventListener("readystatechange", processRequest, false);
  
    function processRequest(e) {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var response = JSON.parse(xhr.responseText);
            var city = response.address.city;
            console.log(city);
            return;
        }
    }
}
  
getCoordintes();

输出：