HTML5地理定位_动力节点Java学院整理


Posted in HTML / CSS onJuly 12, 2017

地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用。今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个浏览器的数据精度情况。

在访问位置信息前,浏览器都会询问用户是否共享其位置信息,以 Chrome 浏览器为例,如果您允许 Chrome 浏览器与网站共享您的位置,Chrome 浏览器会向 Google 位置服务发送本地网络信息,估计您所在的位置。然后,浏览器会与请求使用您位置的网站共享您的位置。

HTML5 Geolocation API 使用非常简单,基本调用方式如下: 

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(locationSuccess, locationError,{
        // 指示浏览器获取高精度的位置,默认为false
        enableHighAccuracy: true,
        // 指定获取地理位置的超时时间,默认不限时,单位为毫秒
        timeout: 5000,
        // 最长有效期,在重复获取地理位置时,此参数指定多久再次获取位置。
        maximumAge: 3000
    });
}else{
    alert("Your browser does not support Geolocation!");
}

locationError为获取位置信息失败的回调函数,可以根据错误类型提示信息:

locationError: function(error){
    switch(error.code) {
        case error.TIMEOUT:
            showError("A timeout occured! Please try again!");
            break;
        case error.POSITION_UNAVAILABLE:
            showError('We can\'t detect your location. Sorry!');
            break;
        case error.PERMISSION_DENIED:
            showError('Please allow geolocation access for this to work.');
            break;
        case error.UNKNOWN_ERROR:
            showError('An unknown error occured!');
            break;
    }
}

locationSuccess为获取位置信息成功的回调函数,返回的数据中包含经纬度等信息,结合Google Map API 即可在地图中显示当前用户的位置信息,如下:

locationSuccess: function(position){
    var coords = position.coords;    
    var latlng = new google.maps.LatLng(
        // 维度
        coords.latitude,
        // 精度
        coords.longitude
    );  
    var myOptions = {  
        // 地图放大倍数  
        zoom: 12,  
        // 地图中心设为指定坐标点  
        center: latlng,  
        // 地图类型  
        mapTypeId: google.maps.MapTypeId.ROADMAP  
    };  
    // 创建地图并输出到页面  
    var myMap = new google.maps.Map(  
        document.getElementById("map"),myOptions  
    );  
    // 创建标记  
    var marker = new google.maps.Marker({  
        // 标注指定的经纬度坐标点  
        position: latlng,  
        // 指定用于标注的地图  
        map: myMap
    });
    //创建标注窗口  
    var infowindow = new google.maps.InfoWindow({  
        content:"您在这里<br/>纬度:"+  
            coords.latitude+  
            "<br/>经度:"+coords.longitude  
    });  
    //打开标注窗口  
    infowindow.open(myMap,marker); 
}

经过测试,Chrome/Firefox/Safari/Opera四个浏览器获取到的位置信息都是一摸一样的,估计都是用的同一个位置服务,数据如下:

HTML5地理定位_动力节点Java学院整理

而IE浏览器的和上面几款浏览器获取到的数据不一样,数据如下:
 

HTML5地理定位_动力节点Java学院整理

位置服务用于估计您所在位置的本地网络信息包括:有关可见 WiFi 接入点的信息(包括信号强度)、有关您本地路由器的信息、您计算机的 IP 地址。位置服务的准确度和覆盖范围因位置不同而异。 
 

总的来说,在PC的浏览器中 HTML5 的地理位置功能获取的位置精度不够高,如果借助这个 HTML5 特性做一个城市天气预报是绰绰有余,但如果是做一个地图应用,那误差还是太大了。不过,如果是移动设备上的 HTML5 应用,可以通过设置 enableHighAcuracy 参数为 true,调用设备的 GPS 定位来获取高精度的地理位置信息。

HTML / CSS 相关文章推荐
css3实现超立体3D图片侧翻倾斜效果
Apr 16 HTML / CSS
详解CSS3选择器的使用方法汇总
Nov 24 HTML / CSS
用CSS3的box-reflect来制作倒影效果
Nov 15 HTML / CSS
CSS实现雨滴动画效果的实例代码
Oct 08 HTML / CSS
html5 canvas绘制放射性渐变色效果
Jan 04 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
May 14 HTML / CSS
HTML5 Blob对象的具体使用
May 22 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
Jan 25 HTML / CSS
CSS 圆形进度栏
Apr 06 HTML / CSS
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
Apr 19 HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
Aug 14 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
Jul 11 #HTML / CSS
html5组织内容_动力节点Java学院整理
Jul 10 #HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 #HTML / CSS
HTML5单页面手势滑屏切换原理分析
Jul 10 #HTML / CSS
HTML5中图片之间的缝隙完美解决方法
Jul 07 #HTML / CSS
html5是什么_动力节点Java学院整理
Jul 07 #HTML / CSS
html5简单示例_动力节点Java学院整理
Jul 07 #HTML / CSS
You might like
第五章 php数组操作
2011/12/30 PHP
php curl模拟post提交数据示例
2013/12/31 PHP
php的laravel框架快速集成微信登录的方法
2016/12/12 PHP
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
打造基于jQuery的高性能TreeView(asp.net)
2011/02/23 Javascript
Javascript实现动态菜单添加的实例代码
2013/07/05 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
2013/12/20 Javascript
JQuery EasyUI 数字格式化处理示例
2014/05/05 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
2015/02/20 Javascript
ECMAScript6中Set/WeakSet详解
2015/06/12 Javascript
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
JS数组搜索之折半搜索实现方法分析
2017/03/27 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
2017/09/28 Javascript
vue实现商城购物车功能
2017/11/27 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
2020/12/29 Javascript
用Python生成器实现微线程编程的教程
2015/04/13 Python
python实现八大排序算法(2)
2017/09/14 Python
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
Python机器学习之SVM支持向量机
2017/12/27 Python
Python实现FTP文件传输的实例
2019/07/07 Python
Python使用sys.exc_info()方法获取异常信息
2020/07/23 Python
使用python将微信image下.dat文件解密为.png的方法
2020/11/30 Python
Html5无刷新修改browser Url的方法
2014/01/15 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
2020/01/03 HTML / CSS
小米旗下精品生活电商平台:小米有品
2018/12/18 全球购物
西班牙用户之间买卖视频游戏的平台:Wakkap
2020/03/21 全球购物
土木工程毕业生自荐信
2013/11/12 职场文书
入党自我评价范文
2014/02/02 职场文书
2014年置业顾问工作总结
2014/11/17 职场文书
教你使用VS Code的MySQL扩展管理数据库的方法
2022/01/22 MySQL
Golang原生rpc(rpc服务端源码解读)
2022/04/07 Golang