zoukankan      html  css  js  c++  java
  • 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>
     
     
  • 相关阅读:
    [MacOS]Sublime text3 安装(一)
    [RHEL8]开启BBR
    PAT Advanced 1136 A Delayed Palindrome (20分)
    PAT Advanced 1144 The Missing Number (20分)
    PAT Advanced 1041 Be Unique (20分)
    PAT Advanced 1025 PAT Ranking (25分)
    PAT Advanced 1022 Digital Library (30分)
    PAT Advanced 1019 General Palindromic Number (20分)
    PAT Advanced 1011 World Cup Betting (20分)
    PAT Advanced 1102 Invert a Binary Tree (25分)
  • 原文地址:https://www.cnblogs.com/LO-ME/p/4598754.html
Copyright © 2011-2022 走看看