HTML每日学习代码：地理位置

原创于 2023-07-12 13:11:22 发布 · 409 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #学习 #前端

HTML5 专栏收录该内容

5 篇文章

订阅专栏

该网页脚本利用HTML5的GeolocationAPI，通过navigator.geolocation对象获取用户的地理位置信息，展示当前的经纬度坐标。如果浏览器不支持此服务，将显示相应错误信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>经纬度坐标</title>
    <style>
        body {
            background-color: #fff;
        }
    </style>
</head>
<body>
    <p id="geo_loc"></p>
    <script>
        function getElement(id) {
            return typeof id === 'string' ? document.getElementById(id) : id;
        }

        function show_it(lat, lon) {
            var str = '您当前的位置，维度：' + lat + '，经度：' + lon;
            getElement('geo_loc').innerHTML = str;
        }

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                show_it(position.coords.latitude, position.coords.longitude);
            },
            function(err) {
                getElement('geo_loc').innerHTML = err.code + "|" + err.message;
            });
        } else {
            getElement('geo_loc').innerHTML = "你当前使用的浏览器不支持Geolocation服务";
        }
    </script>
</body>
</html>