- 浏览: 7325480 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (1546)
- 企业中间件 (236)
- 企业应用面临的问题 (236)
- 小布Oracle学习笔记汇总 (36)
- Spring 开发应用 (54)
- IBatis开发应用 (16)
- Oracle基础学习 (23)
- struts2.0 (41)
- JVM&ClassLoader&GC (16)
- JQuery的开发应用 (17)
- WebService的开发应用 (21)
- Java&Socket (44)
- 开源组件的应用 (254)
- 常用Javascript的开发应用 (28)
- J2EE开发技术指南 (163)
- EJB3开发应用 (11)
- GIS&Mobile&MAP (36)
- SWT-GEF-RCP (52)
- 算法&数据结构 (6)
- Apache开源组件研究 (62)
- Hibernate 学习应用 (57)
- java并发编程 (59)
- MySQL&Mongodb&MS/SQL (15)
- Oracle数据库实验室 (55)
- 搜索引擎的开发应用 (34)
- 软件工程师笔试经典 (14)
- 其他杂项 (10)
- AndroidPn& MQTT&C2DM&推技术 (29)
- ActiveMQ学习和研究 (38)
- Google技术应用开发和API分析 (11)
- flex的学习总结 (59)
- 项目中一点总结 (20)
- java疑惑 java面向对象编程 (28)
- Android 开发学习 (133)
- linux和UNIX的总结 (37)
- Titanium学习总结 (20)
- JQueryMobile学习总结 (34)
- Phonegap学习总结 (32)
- HTML5学习总结 (41)
- JeeCMS研究和理解分析 (9)
最新评论
-
lgh1992314:
[u][i][b][flash=200,200][url][i ...
看看mybatis 源代码 -
尼古拉斯.fwp:
图片根本就不出来好吧。。。。。。
Android文件图片上传的详细讲解(一)HTTP multipart/form-data 上传报文格式实现手机端上传 -
ln94223:
第一个应该用排它网关吧 怎么是并行网关, 并行网关是所有exe ...
工作流Activiti的学习总结(八)Activiti自动执行的应用 -
ZY199266:
获取不到任何消息信息,请问这是什么原因呢?
ActiveMQ 通过JMX监控Connection,Queue,Topic的信息 -
xiaoyao霄:
DestinationSourceMonitor 报错 应该导 ...
ActiveMQ 通过JMX监控Connection,Queue,Topic的信息
Geolocation API用于将用户当前地理位置信息共享给信任的站点,这涉及用户的隐私安全问题,所以当一个站点需要获取用户的当前地理位置,浏览器会提示用户是“允许” or “拒绝”。
先看看哪些浏览器支持Geolocation API:
IE9.0+、FF3.5+、Safari5.0+、Chrome5.0+、Opera10.6+、IPhone3.0+、Android2.0+
也就是说除IE6~IE8外,其它最新的浏览器基本上都支持,包括最新的移动手机。
Geolocation API存在于navigator对象中,只包含3个方法:
1、getCurrentPosition
2、watchPosition
3、clearWatch
getCurrentPosition、watchPosition的参数说明,示例:
navigator.geolocation.getCurrentPosition(success_callback, error_callback, {geolocation选项});
第一个参数是用户允许浏览器共享geolocation成功后的回调方法
第二个参数是用获取地理位置信息失败的处理方法,传入错误对象,包含code、message两个属性
第三个参数都是geolocation选项,所有的geolocation选项都是可选的,它包含的属性如下:
enableHighAccuracy(Boolean型,默认为false,是否尝试更精确地读取纬度和经度,移动设备上,这可能要使用手机上的GPS,这会消耗移动设备更多的电量)
timeout(单位为毫秒,默认值为0,在放弃并触发处理程序之前,可以等待的时间----用户选择期间是不计时的)
maximumAge(单 位为毫秒,默认值为0。用来告诉浏览器是否使用最近缓存的位置数据,如果在maximumAge内有一个请求,将会返回它,而不请求新位置。 maximumAge如果为Infinity,则总是使用一个缓存的位置,如果为0则必须在每次请求时查找一个新位置)
简单的一个示例:
当我点击拒绝时:
当点击允许时:
html源代码:
<html> <head> <meta http-equiv="Content-Type" contentType="text/html; charset=UTF-8" %> <title>HTML5 物理定位</title> <script type="text/javascript"> window.onload=function(){ var options={ enableHighAccuracy:true, maximunAge:1000, timeout:45000 }; if(window.navigator.geolocation){ navigator.geolocation.getCurrentPosition(successCallback,errorCallback,options); }else{ alert("你的浏览器不支持定位!"); } } function successCallback(position){ var output=""; output +="Your position has bean located . \r\n"; output+=" Latitude:"+position.coords.latitude+" "; output+=" Longitude:"+position.coords.longitude+" "; output+=" Accuracy :"+position.coords.accuracy +" meters"; if(position.coords.latitude){ output+=" Accuracy :"+position.coords.altitudeAccuracy +" meters"; } if(position.coords.heading){ output+=" Heading :"+position.coords.Heading +" meters"; } if(position.coords.speed){ output+=" Speed :"+position.coords.Speed +" m/s"; } output+=" Time of Position "+position.timestamp +" m/s"; alert(output); } function errorCallback(error){ switch(error.code){ case error.PERMISSION_DENIED: alert("you have denied access to your position ."); break; case error.POSITION_UNAVAILABLE: alert("there was a problem getting yout position ."); break; case error.TIMEOUT: alert("The application has timed out attempting to get your location ."); break; } } </script> </head> <body > </body> </html>
上面的例子中,只使用了success_callback中的纬度(latitude)和经度(longitude),成功后回调获取用户位置数据position,它包含两个属性:coords、timestamp。
coords属性有7个值,包含上面用到的纬度、经度。
1、accuracy 准确角
2、altitude 海拔高度
3、altitudeAcuracy 海拔高度的精确度
4、heading 行进方向
5、speed 地面的速度
根据获得的纬度与经度,很容易将用户的位置在google地图中显示出来,如下例所示:
核心的javascript脚本:
在google地图+HTML5定位个人位置
<html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>google GEO 物理定位 </title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script> function getElem(id) { return typeof id === 'string' ? document.getElementById(id) : id; } function success(position) { var mapcanvas = document.createElement('div'); mapcanvas.id = 'mapcanvas'; mapcanvas.style.height = '100%'; mapcanvas.style.width = '100%'; getElem("map_canvas").appendChild(mapcanvas); var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var myOptions = { zoom: 15, center: latlng, mapTypeControl: false, navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions); var marker = new google.maps.Marker({ position: latlng, map: map, title:"你在这里!" }); } if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(success); } else { alert("您当前使用的浏览器不支持geolocation服务"); } </script> </head> <body> <div id="map_canvas"></div> </body> </html>
watchPosition像一个追踪器,与clearWatch成对。watchPosition与clearWatch有点像setInterval和clearInterval的工作方式。
var watchPositionId = navigator.geolocation.watchPosition(success_callback, error_callback, options);
navigator.geolocation.clearWatch(watchPositionId );
利用百度+HTML5定位个人位置:
<!DOCTYPE HTML> <html> <head> <meta charset='utf-8'> <title>百度地图</title> <script type='text/javascript' src='http://api.map.baidu.com/api?v=1.3'></script> <script type='text/javascript'> function getLocation() { if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(showMap, handleError, {enableHighAccuracy:true, maximumAge:1000}); }else{ alert('您的浏览器不支持使用HTML 5来获取地理位置服务'); } } function showMap(value) { var longitude = value.coords.longitude; var latitude = value.coords.latitude; var map = new BMap.Map('map'); var point = new BMap.Point(longitude, latitude); // 创建点坐标 map.centerAndZoom(point, 15); var marker = new BMap.Marker(new BMap.Point(longitude, latitude)); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 } function handleError(value) { switch(value.code){ case 1: alert('位置服务被拒绝'); break; case 2: alert('暂时获取不到位置信息'); break; case 3: alert('获取信息超时'); break; case 4: alert('未知错误'); break; } } function init() { getLocation(); } window.onload = init; </script> </head> <body> <div id='map' style='width:600px;height:600px;'></div> </body> </html>
关于Geolocation API的更多参考:
W3C geolocation API
Gears
BlackBerry geolocation API
Nokia geolocation API
Palm geolocation API
OMTP BONDI geolocation API
geo.js
Internet Explorer 9 Guide for Developers: Geolocation
MDN Using geolocation
http://diveintohtml5.org/geolocation.html
来源:草根网(www.20ju.com) - 互联网界的读者文摘
发表评论
-
phonegap contact API的使用
2012-07-10 14:23 2892没事开发一个phonegap通讯录使用: js如 ... -
phonegap开发中必备的帮助文档android apk
2012-07-08 16:48 2658在phonegap配置jquerymobile开发的人 ... -
jquerymobile 开发中几个样式问题
2012-07-07 15:16 24691.在jquerymobile开发中如果遇到中文乱码处理如下 ... -
【转】JavaScript编程模式:模块的力量
2012-07-06 12:50 1878块模式是一个常用的JavaScript编程模式。它 ... -
【转】JavaScript闭包和模块模式
2012-07-06 12:45 2052原文:http://www.joezimj ... -
【转】PhoneGap域名白名单说明书(Domain Whitelist Guide)
2012-07-05 17:31 9890概述Cordova项目中的域名白名单是一个用来控制外部域名访问 ... -
phonegap拍照的获取图片和设置问题
2012-07-05 17:10 12771目前项目中Android中第一次加载使用用 ... -
Native+WebApp中Phonegap调用Android Activity
2012-07-05 16:10 10987在项目采用Native+Web方式开发,A ... -
IOS Xcode4.3使用中几个问题
2012-07-04 15:36 18621. xcode 4.3.2 编译生成的app放在哪里? ... -
PhoneGap Xcode iOS入门教程
2012-07-04 15:30 7818文介绍了利用Xcode建立PhoneGap应用程 ... -
phonegap底层原理学习和研究(四)
2012-06-12 17:34 3087在phonegap ... -
phonegap底层原理学习和研究(三)
2012-06-12 17:08 6277针对Phonegap开发中常用的D ... -
phonegap底层原理学习和研究(二)
2012-06-11 11:07 3185转载自IBM中国开发网站: http://www.ibm ... -
【转】手机应用开发者需注意的20个事项
2012-05-30 10:54 1826你想要成为手机开发者吗?你的目标可能是从应用商店中赚取大 ... -
【转】8 个移动产品设计必备网站
2012-05-30 09:49 2152本文整理了8个移动设计资源丰富的网站,希望对你的开发设计工作有 ... -
HTML5 canvas实现电子签名
2012-05-29 17:27 226821.为什么要用到BASE64编码的图片信息 Base6 ... -
jquerymobile 一个简单的九宫格实现(Gallery)
2012-05-28 11:10 9287jquerymobile实现一个简单的九宫格代码如下: ... -
phonegap底层原理学习和研究(一)
2012-05-21 14:16 12067在phonegap中,通过android和ip ... -
jquerymobile google地图插件jquery-ui-map
2012-05-20 16:12 5931最近要开发地图相关的功能,学习一下jquerymob ... -
【转】JQuerymobile 官方 资源和插件
2012-05-19 16:51 8096In this section, we have gat ...
相关推荐
HTML5 Geolocation API是Web开发中的一个重要工具,它允许网页应用程序获取访问设备的地理位置信息,如经纬度坐标、高度、速度等。这个API是HTML5标准的一部分,为开发者提供了无须借助外部插件就能实现地理位置服务...
HTML5的地理定位功能演示
"基于Html5中geolocation API开发的交友应用网站"这一标题揭示了我们讨论的主题,即一个利用HTML5的Geolocation API构建的在线社交平台。Geolocation API是HTML5的一项重要功能,它允许网页应用获取用户的地理位置...
Geolocation API是HTML5提供的一种获取用户当前位置的API,可以通过浏览器获取用户的当前位置,并将其应用于各种应用场景中,如考勤管理系统、导航系统等。 知识点4: 考勤管理系统的设计与实现 本文完成了一个基于...
HTML5是现代网页开发的核心标准之一,其引入了许多新的特性和功能,其中之一就是Geolocation API。这个API允许web应用获取用户的地理位置信息,为构建位置感知的应用提供了强大的支持。"HTML5Geolocation-英文原版....
ng地理定位器 让用户借助 HTML5 Geolocation API 和 Google Maps 告诉您他们在哪里。 现场演示: : 该项目使用作为起点。安装 npm install --save ng-geolocator或者 bower install --save ng-geolocator入门有关...
MockGeolocation 是一个用于模拟 html 5 geolocation api 的库。 用法 // simulate a geolocation MockGeolocation.setCurrentLatLng(53.4152431, -8.2390307) // get current position navigator.geolocation....
系统设计与实现过程中,HTML5 Geolocation API起到了核心作用。该API允许网页应用程序获取用户的经度和纬度坐标,通常结合GPS、Wi-Fi信号或移动网络数据来确定位置。为了确保定位的准确性,系统可能需要考虑多种定位...
【HTML5 GeoLocation API】 HTML5的GeoLocation API是获取用户地理位置的关键。它允许Web应用程序在用户的许可下访问其设备的GPS或其他定位服务提供的经纬度数据。Seeker利用这一功能,能够精确地确定用户的位置,...
第一部分介绍了HTML5 Geolocation API。使用这种API,开发人员不必针对特定设备编程,就能够在浏览器中直接编写地理定位应用。这部分共6章,介绍了Geolocation API在浏览器代码中的使用,并通过大量示例向读者展示其...
查找最近的 Marketo-Office 此示例获取用户的位置,并返回最近的 Marketo 办公室位置及其电话号码。 如果无法访问用户的位置,则脚本默认为 Marketo 的... 该示例使用和 HTML5 Geolocation API。 讨论了更多实施细节。
#### 一、HTML5 Geolocation API简介 HTML5中的Geolocation API为网页提供了获取用户地理位置的功能。它通过浏览器与操作系统交互来获取设备的位置信息,并以标准格式返回给Web应用程序。这对于开发需要地理位置...
这项技术主要依赖于HTML5的Geolocation API,该API提供了一种标准化的方法来获取用户的地理位置,使得开发者可以构建出更具有个性化的地理位置服务,例如导航、本地搜索和社交分享等功能。 1. **HTML5 Geolocation ...
HTML5的Geolocation API是浏览器内置的一个功能,允许网页获取用户的地理位置信息。通过调用`navigator.geolocation`对象,开发者可以请求访问用户的GPS、Wi-Fi、IP地址等数据来估计位置。 2. **获取位置信息** ...
HTML5 Geolocation是HTML5提供的一个标准API,允许网页和应用获取用户的地理位置信息,这对于开发基于用户位置的服务应用具有重要意义。下面将详细介绍HTML5 Geolocation相关知识点: 一、HTML5 Geolocation的核心...
第一部分介绍了HTML5 Geolocation API。使用这种API,开发人员不必针对特定设备编程,就能够在浏览器中直接编写地理定位应用。这部分共6章,介绍了Geolocation API在浏览器代码中的使用,并通过大量示例向读者展示其...
从第2 章起,分别围绕构建令人神往的富web 应用,逐一讨论了html5 的canvas、geolocation 、communication、websocket、forms、web workers、storage 等api 的使用, 辅以直观明了的客户端和服务器端示例代码,让...
为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新特性构建先进的Web应用,并以大量的示例涵盖全部HTML5 API。此外,还介绍...