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>
     
     
  • 相关阅读:
    python爬虫简单实现,并在java中调用python脚本,将数据保存在json文件中
    封闭类
    对象的复制和数据类成员的解构
    数据类
    Git 标签
    Git 查看提交历史
    [精]Oracle APEX 5.0 入门教程(一) Form表单
    UISearchbar去除背景色的方法,适合iOS5/6/7/8.0beta
    哈希表——线性探測法、链地址法、查找成功、查找不成功的平均长度
    《Android源代码设计模式解析与实战》读书笔记(二十一)
  • 原文地址:https://www.cnblogs.com/LO-ME/p/4598754.html
Copyright © 2011-2022 走看看