2022.1.5--HTML5--Geolocation（地理定位）

最新推荐文章于 2024-08-09 15:16:49 发布

啊西边的瓜

最新推荐文章于 2024-08-09 15:16:49 发布

阅读量146

点赞数

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

本文链接：https://blog.csdn.net/qq_41083616/article/details/122324630

版权

前端学习专栏收录该内容

45 篇文章 0 订阅

订阅专栏

HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
1. getCurrentPosition() 方法 - 返回数据
getCurrentPosition() 运行成功，则向参数showPosition中规定的函数返回一个 coordinates 对象
在这里插入图片描述
2. watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）
clearWatch() - 停止 watchPosition() 方法

举例：百度获取经纬度

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--引入百度 API，"ak=" 后面一串码是密钥，最好自己申请-->
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=7a6QKaIilZftIMmKGAFLG7QT1GLfIncg"></script>
</head>
<body>
    <input type="button" onclick="getLocation()" value="确认" />
    <div id="position"></div>
    <script type="text/javascript">
    var x = document.getElementById('position');
    function getLocation() {
        // 创建百度地理位置实例，代替 navigator.geolocation
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(e) {
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                // 百度 geolocation 的经纬度属性不同，此处是 point.lat 而不是 coords.latitude
                x.innerHTML = '纬度：' + e.point.lat + '<br/>经度：' + e.point.lng;
            } else {
                x.innerHTML = 'failed' + this.getStatus();
            }
        });
    }
    </script>
</body>
</html>