【转载】HTML5 地理位置定位的原理及应用

标签: HTML5热点关注 | 发表时间:2012-07-10 02:54 | 作者:HTML5研究小组
出处:http://www.mhtml5.com

地理位置是HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性东莞网站建设公司能够开发基于位置信息的应用。下面 聚焦网络科技向大家介绍一下HTML5地理位置定位的基本原理及各个浏览器的数据精度情况。
在访问位置信息前,浏览器都会询问用户是否共享其位置信息,以 Chrome 浏览器为例,如果您允许 Chrome 浏览器与网站共享您的位置,Chrome 浏览器会向 Google 位置服务发送本地网络信息,估计您所在的位置。然后,浏览器会与请求使用您位置的网站共享您的位置。
HTML5 Geolocation API 使用非常简单,基本调用方式如下:

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(locationSuccess, locationError,{
// 指示浏览器获取高精度的位置,默认为false
enableHighAcuracy: 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 地理位置定位的原理及应用 - 聚焦网络科技 - 东莞聚焦网络科技有限公司

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

HTML5 地理位置定位的原理及应用 - 聚焦网络科技 - 东莞聚焦网络科技有限公司

 
位置服务用于估计您所在位置的本地网络信息包括:有关可见 WiFi 接入点的信息(包括信号强度)、有关您本地路由器的信息、您计算机的 IP 地址。位置服务的准确度和覆盖范围因位置不同而异。
总的来说,HTML5 的地理位置功能获取的位置精度还是不够的,如果借助这个HTML5 特性做一个城市天气预报是绰绰有余,但如果是做一个导航应用,那误差还是太大了,得调用GPS定位才行。
转载自:  http://jujiaokeji2012.blog.163.com/blog/static/207286017201261094437583/

相关 [html5 地理位置 原理] 推荐:

【转载】HTML5 地理位置定位的原理及应用

- - HTML5研究小组
地理位置是HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性东莞网站建设公司能够开发基于位置信息的应用. 下面 聚焦网络科技向大家介绍一下HTML5地理位置定位的基本原理及各个浏览器的数据精度情况. 在访问位置信息前,浏览器都会询问用户是否共享其位置信息,以 Chrome 浏览器为例,如果您允许 Chrome 浏览器与网站共享您的位置,Chrome 浏览器会向 Google 位置服务发送本地网络信息,估计您所在的位置.

HTML5开发:地理位置定位指南

- - HTML5研究小组
HTML5提供的最令人激动的特性之一. JavaScript代码,可以创建出能确定用户地理位置详细信息的Web应用,包括经纬度以及海拔等. 一些Web应用甚至能通过监控用户位置随时间的移动来提供导航功能,其中还综合了GoogleMaps API这样的地图系统. 和所有HTML5的功能一样,你还不能依赖浏览器提供支持.

HTML5设计原理

- jessie - 蓝色理想
Jeremy Keith在 Fronteers 2010 上的主题演讲 下载PPT(PDF) 观看视频 今天我想跟大家谈一谈HTML5的设计. 主要分两个方面:一方面,当然了,就是HTML5. 我可以站在这儿只讲HTML5,但我并不打算这样做,因为如果你想了解HTML5的话,你可以Google,可以看书,甚至可以看规范.

HTML5开发:原理与实现

- - Web App Trend
在这篇文章中, W3C 浏览器技术核心标准工作成员 Mike Smith 谈论了 HTML5 到底是什么,并给出了一些对开发人员有用的资源,可以让他们跟进不断演化的标准. 我们正处于Web平台更新换代的过程之中. HTML5通常被用来描述这一过程,尽管更新换代中的技术并不局限于HTML5标准所定义的特性.

HTML 5中地理位置api小结

- - ITeye博客
  HTML 5提供了地理位置等一系列API可以给用户使用,方便用户制作LBS的地理应用,首先在支持HTML 5的浏览器中,当开启API时,会询问是否用户同意使用api,否则不会开启的,保证安全. 1) 开启,判断是否浏览器支持LBS api.    上面的例子中,还在displayError方法中,捕捉了异常;.

基于地理位置的广告威力初现

- 小皮 - 爱范儿 · Beats of Bits
更精准的投放一直是广告公司的重要目标. 在这方面,拥有大量用户信息的移动运营商占据着得天独厚的优势. O2 几个月前在英国推出“你在这儿(You Are Here)”广告服务目前已经初显成效. O2 的“你在这儿”可以根据用户年龄、性别、当前所在位置、所处区域的气温投放短信/彩信广告. 厂商可以根据这些信息更有效地过滤出目标用户,实现精确投放.

地理位置技术将如何将改变服务业

- 彭全兵 - 互联网的那点事...
据国外媒体报道, 现场服务管理应用套件ServiceMax的首席执行官戴夫·约诺德(Dave Yarnold)今天发表署名文章,讨论地理位置技术在服务业中的应用,以下为全文摘要:. 面向消费者的地理位置服务如雨后春笋般冒出来,它们无处不在,比如Uber,它可以派一辆轿车到你的门口,速度比出租车快一倍,又比如应用程序Bizzy,它显示你的朋友们最近在哪里吃饭,并为你提供朋友们的推荐.

+1: 基于地理位置的活动交友应用

- 和谐牌河蟹 - Tech2IPO
你近期一定在被LBS、O2O、SOLOMO这些关键词反复轰炸,以几米、陌陌为代表的陌生人弹性社交应用,以幸会、在这儿为代表的活动交友应用,或许你并不了解这些关键词背后所代笔的产业变革,但它们的确为我们的生活带来了新的改变. “+1”这是一个好坏都特别明显的名称,很个性但也很容易被误认,这是生活中最常见的符号与字符,同时Google之前也推出了一款同名工具.

IP地理位置数据库 中国地区扩展版 120621

- - eMule Fans 电骡爱好者
这里的 IP地理位置数据库 中国地区扩展版,是 我们在webhosting.info的数据库基础上,进行了简体中文的汉化,并将 QQ IP 数据库(QQWry.Dat)纯真版中的中国地区详细IP数据库导入,而结合得到的. 更新时间2012年6月21日,版本号120621. IP to Country 数据库文件ip-to-country.csv,可用于Xtreme、MorphXT等许多支持IP2C功能的 eMule Mod软件.

手机扬招:基于地理位置的叫车应用

- - Tech2IPO
手机扬招是一款基于地理位置的叫车应用,值得注意的是他们提供服务的范围仅在杭州市内,“扬招”一词大概是因为大多数人都会扬手招车. 目前他们已经推出Android、iOS、Windows Mobile多个平台的手机应用. 手机扬招的应用模式很简单,获取用户的当前位置然后发起叫车请求. 特别的是他们与杭州出租车调度中心进行深度合作,可以通过软件可实时查看所处位置附近空出租车的分布情况,并且通过杭州出租车调度中心的灵活调度,无需通话实现自助叫车.