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

最新推荐文章于 2024-06-22 11:04:52 发布

是我知白哒

最新推荐文章于 2024-06-22 11:04:52 发布

阅读量317

点赞数

分类专栏： HTML5 文章标签： html 学习前端

本文链接：https://blog.csdn.net/Zb_Xl/article/details/131679263

版权

HTML5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

<!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>