获取当前位置的经度纬度

最新推荐文章于 2023-10-10 15:39:19 发布

Hope°

最新推荐文章于 2023-10-10 15:39:19 发布

阅读量1.4k

点赞数

分类专栏： js 笔记文章标签：前端 html5

本文链接：https://blog.csdn.net/m0_52773472/article/details/116535272

版权

笔记同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

20 篇文章 0 订阅

订阅专栏

通过h5新增的navigator获得当前位置的经度纬度，使用方法为：navigator.geolocation.getCurrentPosition(success,error)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>地理位置</title>
</head>

<body>
    <div> 您目前在地理位置: <span class="nowIP"></span>
    </div>
</body>
<script src="../web/dist/js/jquery-1.12.4.min.js"></script>
<script>
    getLocation()

    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(getSuccess, getError);
            // 支持
            console.log("支持地理位置接口");
        } else {
            // 不支持
            console.log("不支持地理位置接口");
        }
    }
    //同意授权
    function getSuccess(event) {
        $(".nowIP").html("纬度x:" + event.coords.latitude + "-" + "y:" + event.coords.longitude)
    }
    //拒绝授权
    function getError(error) {
        console.log(error)
        console.log("Error code " + error.code + ". " + error.message);
        switch (error.code) {
            case error.PERMISSION_DENIED:
                console.log("定位失败,用户拒绝请求地理定位");
                break;
            case error.POSITION_UNAVAILABLE:
                console.log("定位失败,位置信息是不可用");
                break;
            case error.TIMEOUT:
                console.log("定位失败,请求获取用户位置超时");
                break;
            case error.UNKNOWN_ERROR:
                console.log("定位失败,定位系统失效");
                break;
        }
    }
</script>

</html>