如何使用 JavaScript 获取用户所在的当前城市并将其显示在 <h2> 中？

Question

$(document).ready(function(){
    $("#getLocation").on("click", function(){
        $.getJSON('https://geoip-db.com/json/geoip.php?jsonp=?') 
        .done (function(location) {
            $('#city').html(location.city);             
        });
    });
});

这是我目前使用的 JavaScript，这里是我使用它的 CodePen 的链接。我也在使用用户城市的位置来查找该城市的天气。

我已经在多个站点上阅读了有关如何使用几种不同的 API 来获取用户城市位置的信息，但没有在我的项目中使用过。我在这里先向您的帮助表示感谢。

Answer 1

为了详细说明我之前的答案，获取坐标的更简洁、更原始的 JavaScript 方法是这样的。

这只是几条短线，好处是巨大的：

1. 不必包含 jQuery 库，它很大并且会减慢页面加载时间
2. 这意味着您不必依赖大量的外部 API 来对相同的数据（和其他无用的 API 特定信息，例如 requestID）进行 AJAX 调用，并且将认真简化您的应用程序。
3. 避免使用许多回调，从而避免回调地狱。

结果见下图。超级轻量级​​和快速。有关更多详细信息，请查看MDN - 使用地理定位。

if ("geolocation" in navigator) {
    // Do something with coordinates returned
    function processCoords(position) {
        let latitude = position.coords.latitude;
        let longitude = position.coords.longitude;
        let first_div = document.querySelector('div');
        let el_h2 = document.createElement('h2');

        // Set h2 text as coordinates
        el_h2.innerText = `Latitude: ${latitude}, Longitude: ${longitude}`;

        // Append h2 to document
        first_div.appendChild(el_h2);
    }

    // Fetch Coordinates
    navigator.geolocation.getCurrentPosition(processCoords);
}

获取城市：

通常最好的做法是将坐标仅存储在您的数据库中，然后在需要时发出单独的城市请求。当您想在移动或桌面上实现地图视图时，这会使事情变得更容易，这些视图都使用坐标而不是绘图名称。

您可以使用 Google Maps API 并直接传入 LatLong 数据。有人创建了该怎么办呢梗概这里。

使用 GMaps 代替 Geo-IP 的好处：

1. Google Maps API 进行了大量、大量、大量优化。从更快的服务器到更好编写的代码。您还可以导入 GMaps API 的特定部分，以便减少源代码大小。所有这些加起来带来了更快的体验。
2. 可以假设 GMap 比 Geo-Ip 等 3rd 方站点存在的时间更长。