HTML5-地理位置接口

最新推荐文章于 2024-06-08 10:28:11 发布

辛丙亮

最新推荐文章于 2024-06-08 10:28:11 发布

阅读量545

点赞数

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

本文链接：https://blog.csdn.net/qq_22533095/article/details/52163732

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

HTML5地理位置接口

简单来说这个接口的使用就是两个函数

getCurrentPosition(successCallback, errorCallback, options) 一次更新位置
watchPosition(successCallback, errorCallback, options) 重复更新位置
两者的区别在于，前者一次性获得，而后者是一个函数监听，位置发生变化就会调用函数，并返回一个watchId,使用clearWatch(watchID)就能终止监听

successcallback

该回调函数会获得一个position，一些特性将会保存在corrds中

function updateLocation(position) {
    latitude = position.coords.latitude; //纬度
    longitude = position.coords.longitude; //经度
    var accuracy = position.coords.accuracy; //误差

    var altitude = position.coords.altitude; //海拔高度
    var altitudeAccuracy = position.coords.altitudeAccuracy; //海拔高度的准确度
    var heading = position.coords.heading; //前进方向
    var speed = position.coords.speed; //前进速度

    var timestamp = position.timestamp; // 调用时间戳
}

errosrCallback

发生错误时返回将获得必要的参数

//出错调用函数
function handleLocationError(error) {
    switch (error.code){
        case 0:
            $('#error>span').html(error.message);
            break;
        case 1:
            $('#error>span').html(error.message);
            break;
        case 2:
            $('#error>span').html(error.message);
            break;
        case 3:
            $('#error>span').html(error.message);
            break;
        default:
            $('#error>span').html('未知错误');
            break;
    }
}

options

对navigator.geolocation的行为进行调节,使用对象的形式进行使用

对象属性	描述
enableHighAccuracy	是否启用高精度模式
timeout	设置超时时间
maximumAge	间隔重新获取时间

有毒的百度地图

以下是百度地图接口的调用，但是有毒的百度建议我么在前端调用时使用前端接口，后端调用使用后端接口，但是申请的前端接口根本无法使用，在前端使用后端接口却正常

<style>
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #container{height:100%}
    </style>
</head>
<body>
<div id="container"></div>
</body>
<script>
    var api = navigator.geolocation;
    var latitude,longitude;

    //更新用户地理位置信息
    function updateLocation(position) {
        latitude = position.coords.latitude; //纬度
        longitude = position.coords.longitude; //经度
        var accuracy = position.coords.accuracy; //误差

        var altitude = position.coords.altitude; //海拔高度
        var altitudeAccuracy = position.coords.altitudeAccuracy; //海拔高度的准确度
        var heading = position.coords.heading; //前进方向
        var speed = position.coords.speed; //前进速度

        var timestamp = position.timestamp;

       loadScript();
    }

    //出错调用函数
    function handleLocationError(error) {
        switch (error.code){
            case 0:
                $('#error>span').html(error.message);
                break;
            case 1:
                $('#error>span').html(error.message);
                break;
            case 2:
                $('#error>span').html(error.message);
                break;
            case 3:
                $('#error>span').html(error.message);
                break;
            default:
                $('#error>span').html('未知错误');
                break;
        }
    }

    api.watchPosition(updateLocation, handleLocationError,{enableHighAccuracy: true, timeout: 10000});

    //使用百度的接口
    function initialize() {
        var map = new BMap.Map("container");          // 创建地图实例
        var point = new BMap.Point(longitude, latitude);  // 创建点坐标
        map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
    }

    function loadScript() {


        var script = document.createElement("script");
        script.src = "http://api.map.baidu.com/api?v=2.0&ak=&callback=initialize";//此为v2.0版本的引用方式
        document.body.appendChild(script);
    }
</script>