• HTML5地理位置概述和地理位置对象的详解


    一、地理位置
      经度  :   南北极的连接线
      纬度  :   东西连接的线
     
    二、位置信息从何而来
      IP地址
      GPS全球定位系统
      Wi-Fi无线网络
      基站
     
     
     
     
    三、地理位置对象(navigator.geolocation
      – 单次定位请求  :getCurrentPosition(请求成功,请求失败,数据收集方式)
     
      –请求成功函数
        »经度 :  coords.longitude
        »纬度 :  coords.latitude
        »准确度 :  coords.accuracy
        »海拔 :  coords.altitude
        »海拔准确度 :  coords.altitudeAcuracy
        »行进方向 :  coords.heading
        »地面速度 :  coords.speed
        »时间戳 : new Date(position.timestamp)
     
      – 请求失败函数
        »失败编号  :code
          »0  :  不包括其他错误编号中的错误
          »1  :  用户拒绝浏览器获取位置信息
          »2  :  尝试获取用户信息,但失败了
          »3  :   设置了timeout值,获取位置超时了
     
      –数据收集 :  json的形式
        »enableHighAcuracy  :  更精确的查找,默认false
        »timeout  :  获取位置允许最长时间,默认infinity
        »maximumAge :  位置可以缓存的最大时间,默认0
    <script>
    //LBS : 基于地图信息的应用
    window.onload = function(){
        var oInput = document.getElementById('input1');
        var oT = document.getElementById('t1');
        
        oInput.onclick = function(){
            
            navigator.geolocation.getCurrentPosition(function(position){
                
                oT.value += '经度:' + position.coords.longitude+'
    ';
                oT.value += '纬度 :' + position.coords.latitude+'
    ';
                oT.value += '准确度 :' + position.coords.accuracy+'
    '; //就是经度和纬度的准确度,没什么用处
                oT.value += '海拔 :' + position.coords.altitude+'
    ';
                oT.value += '海拔准确度 :' + position.coords.altitudeAcuracy+'
    ';
                oT.value += '行进方向 :' + position.coords.heading+'
    ';   //移动设备上才有用,PC不支持
                oT.value += '地面速度 :' + position.coords.speed+'
    ';        //移动设备上才有用,PC不支持
                oT.value += '时间戳:' + new Date(position.timestamp)+'
    ';
            },function(err){
                alert( err.code );//err.code // 失败所对应的编号
                
            },{
                enableHighAcuracy : true,
                timeout : 5000,
                maximumAge : 5000        //每次请求定位的时候,如果不超过这个设置的时间,那么就不重新请求定位,而是用缓存
            });
            
        };
    };
    </script>
    </head>
    
    <body>
        <input type="button" value="请求" id="input1" /><br />
        <textarea id="t1" style="400px; height:400px; border:1px #000 solid;"></textarea>
    </body>
      –多次定位请求  :  watchPosition(像setInterval)
        »移动设备有用,位置改变才会触发
        »配置参数:frequency 更新的频率

       –关闭更新请求  :  clearWatch(像clearInterval)

    <script>
    
    //LBS : 基于地图信息的应用
    
    window.onload = function(){
        var oInput = document.getElementById('input1');
        var oT = document.getElementById('t1');
        
        var timer = null;
        
        oInput.onclick = function(){
            
            timer = navigator.geolocation.watchPosition(function(position){  //多次定位请求,返回一个id,通过这个id清除多次定位请求
                
                oT.value += '经度:' + position.coords.longitude+'
    ';
                oT.value += '纬度 :' + position.coords.latitude+'
    ';
                oT.value += '准确度 :' + position.coords.accuracy+'
    ';
                oT.value += '海拔 :' + position.coords.altitude+'
    ';
                oT.value += '海拔准确度 :' + position.coords.altitudeAcuracy+'
    ';
                oT.value += '行进方向 :' + position.coords.heading+'
    ';
                oT.value += '地面速度 :' + position.coords.speed+'
    ';
                oT.value += '时间戳:' + new Date(position.timestamp)+'
    ';
                
            },function(err){
                alert( err.code );// 失败所对应的编号
                navigator.geolocation.clearWatch(timer);//通过多次定位请求返回的id关闭更新请求
                
            },{
                enableHighAcuracy : true,
                timeout : 5000,
                maximumAge : 5000,
                frequency : 1000    //更新的频率(多次定位请求的频率)
            });
            
        };
        
    };
    </script>
    </head>
    <body>
        <input type="button" value="请求" id="input1" /><br />
        <textarea id="t1" style="400px; height:400px; border:1px #000 solid;"></textarea>
    </body>
     
     
  • 相关阅读:
    Dockerfile 指令 VOLUME 介绍
    Spring boot(4)-应用打包部署
    Docker Dockerfile详解
    poj-1045(数学不好怪我咯)
    poj-3185-开关问题
    poj-1163-The Triangle
    归并排序(Merge Sort)
    交换排序—快速排序(Quick Sort)
    交换排序—冒泡排序(Bubble Sort)
    选择排序—堆排序(Heap Sort) 没看明白,不解释
  • 原文地址:https://www.cnblogs.com/LO-ME/p/4598754.html
Copyright © 2020-2023  润新知