刻刻帝的海角 2024-02-21 08:15 采纳率: 52.6%
浏览 18
已结题

通过地理定位获取用户当前城市名，并将城市名输出到网页

img


实现通过地理定位获取用户当前城市名，并将城市名输出到网页这个位置上，通过原生JS该如何实现？

  • 写回答

3条回答 默认 最新

  • IT技术分享社区 优质创作者: 数据库技术领域 2024-02-21 08:44
    关注

    该回答引用chatgpt
    你可以使用原生 JavaScript 结合浏览器的 Geolocation API 来获取用户当前位置的经纬度，并通过逆地理编码获取用户所在城市名称，然后将城市名称输出到网页上。以下是一个简单的示例代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取用户当前城市名</title>
</head>
<body>
    <h1>用户当前城市名：</h1>
    <p id="city"></p>

    <script>
        // 获取用户当前位置的城市名
        function getCityName() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    const latitude = position.coords.latitude;
                    const longitude = position.coords.longitude;
                    
                    fetch(`https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=${latitude}&longitude=${longitude}&localityLanguage=zh`)
                        .then(response => response.json())
                        .then(data => {
                            const city = data.city;
                            document.getElementById('city').textContent = city;
                        })
                        .catch(error => {
                            console.error('Error:', error);
                        });
                }, function(error) {
                    console.error('Error:', error);
                });
            } else {
                console.error('Geolocation is not supported by this browser.');
            }
        }

        getCityName();
    </script>
</body>
</html>

    在这个示例中，我们通过 Geolocation API 获取用户当前位置的经纬度，然后使用第三方逆地理编码服务（这里使用了 BigDataCloud API）来获取用户所在城市名称，并将城市名称输出到网页上。

    请注意，使用第三方服务需要进行网络请求，所以需要确保你的网页可以访问该服务。另外，逆地理编码服务可能会有一些限制或需要注册 API 密钥，具体情况请查看服务提供商的文档。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 11月7日
  • 已采纳回答 11月7日
  • 创建了问题 2月21日