HTML5新增特性地理定位

最新推荐文章于 2024-04-08 11:42:28 发布

小可同学啊

最新推荐文章于 2024-04-08 11:42:28 发布

阅读量115

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/m0_55041880/article/details/118066968

版权

前端专栏收录该内容

61 篇文章

订阅专栏

封装函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //获取地理定位
       function getLocation(){
           if(navigator.getLocation){
               navigator.getLocation.getCurrentPosition(showPosition,showError);
           }else{
               alert("浏览器不支持地理定位")
           }
       }
    //    成功时调用
    function showPosition(position){
        var lat = position.coords.latitude;//纬度
        var lag = position.coords.longitude;//经度
        alert('纬度'+lat+',经度'+lag);
    }
    // 失败时调用
    function showError(error){
        switch(error.code){
            case error.PERMISSION_DENIED:
            alert("定位失败，用户拒绝请求地理定位");
            break;
            case error.POSITION_UNAVAILABLE:
            alert("定位失败 位置信息不可用");
            break;
            case erroe.TIMEOUT:
            alert("定位失败 请求获取用户位置超时");
            break;
            case error.UNKNOWN_ERROR:
            alert("定位失败 定位系统失效");
            break;
        }
    }
    </script>
</body>
</html>