html5中地理位置定位api接口开发应用小结


Posted in HTML / CSS onJanuary 04, 2013

地理位置定位的几种方式:IP地址,GPS,Wifi,GSM/CDMA

地理位置获取流程
1、用户打开需要获取地理位置的web应用。
2、应用向浏览器请求地理位置,浏览器弹出询问,询问用户是否共享地理位置。
3、假设用户允许,浏览器从设别查询相关信息。
4、浏览器将相关信息发送到一个信任的位置服务器,服务器返回具体的地理位置。

HTML5地理地位的实现
1. 实现基于浏览器(无需后端支持)获取用户的地理位置技术
2. 精确定位用户的地理位置( 精度最高达10m之内,依赖设备 )
3. 持续追踪用户的地理位置
4. 与 Google Map、或者 Baidu Map 交互呈现位置信息

Geolocation API 用于将用户当前地理位置信息共享给信任的站点,这涉及用户的隐私安全问题,所以当一个站点需要获取用户的当前地理位置,浏览器会提示用户是“允许” or “拒绝”。
先看看哪些浏览器支持Geolocation API:
IE9.0+、FF3.5+、Safari5.0+、Chrome5.0+、Opera10.6+、IPhone3.0+、Android2.0+
Geolocation API存在于navigator对象中,只包含3个方法:

复制代码
代码如下:

1、getCurrentPosition //当前位置
2、watchPosition //监视位置
3、clearWatch //清除监视
navigator.geolocation.getCurrentPosition( … , function(error){
switch(error.code){
case error.TIMEOUT :
alert( " 连接超时,请重试 " );
break;
case error.PERMISSION_DENIED :
alert( " 您拒绝了使用位置共享服务,查询已取消 " );
break;
case error.POSITION_UNAVAILABLE :
alert( " ,抱歉,暂时无法为您所在的星球提供位置服务 " );
break;
}
});

watchPosition像一个追踪器与clearWatch成对。
watchPosition与clearWatch有点像setInterval和clearInterval的工作方式。
var watchPositionId = navigator.geolocation.watchPosition(success_callback, error_callback, options);
navigator.geolocation.clearWatch(watchPositionId );

HTML 5提供了地理位置等一系列API可以给用户使用,方便用户制作LBS的地理应用,首先在支持HTML 5的浏览器中,当开启API时,会询问是否用户同意使用api,否则不会开启的,保证安全。
1、开启,判断是否浏览器支持LBS api

复制代码
代码如下:

function isGeolocationAPIAvailable()
{
var location = "No, Geolocation is not supported by this browser.";
if (window.navigator.geolocation) {
location = "Yes, Geolocation is supported by this browser.";
}
alert(location);
}

上面的例子中,还在displayError方法中,捕捉了异常;
2、获得用户的地理位置
这个使用getCurrentPosition就可以了;
复制代码
代码如下:

function requestPosition() {
if (nav == null) {
nav = window.navigator;
}
if (nav != null) {
var geoloc = nav.geolocation;
if (geoloc != null) {
geoloc.getCurrentPosition(successCallback);
}
else {
alert("Geolocation API is not supported in your browser");
}
}
else {
alert("Navigator is not found");
}
}

当获得地理位置成功后,会产生一个回调方法了,处理返回的结果,
复制代码
代码如下:

function setLocation(val, e) {
document.getElementById(e).value = val;
}
function successCallback(position)
{
setLocation(position.coords.latitude, "latitude"); setLocation(position.coords.longitude, "longitude");
}

3、一个很常见的问题,是如何跟踪用户不断变化的地理位置,这里小结下其中用到的两个api
1 watchPosition
例子如下:
复制代码
代码如下:

function listenForPositionUpdates() {
if (nav == null) {
nav = window.navigator;
}
if (nav != null) {
var geoloc = nav.geolocation;
if (geoloc != null) {
watchID = geoloc.watchPosition(successCallback);
} else {
alert("Geolocation API is not supported in your browser");
}
} else {
alert("Navigator is not found");
}
}

然后在successCallback中,就可以设置显示最新的地理位置:
复制代码
代码如下:

function successCallback(position){
setText(position.coords.latitude, "latitude"); setText(position.coords.longitude, "longitude");
}

如果不希望实时跟踪,则可以取消之:
function clearWatch(watchID) {
window.navigator.geolocation.clearWatch(watchID);
}
4、如何处理异常
当遇到异常时,可以捕捉之:
复制代码
代码如下:

if (geoloc != null) {
geoloc.getCurrentPosition(successCallback, errorCallback);
}
function errorCallback(error) {
var message = "";
switch (error.code) {
case error.PERMISSION_DENIED:
message = "This website does not have permission to use "
+ "the Geolocation API";
break;
case error.POSITION_UNAVAILABLE:
message = "The current position could not be determined.";
break;
case error.PERMISSION_DENIED_TIMEOUT:
message = "The current position could not be determined "
+ "within the specified timeout period.";
break;
}
if (message == "") {
var strErrorCode = error.code.toString();
message = "The position could not be determined due to "
+ "an unknown error (Code: " + strErrorCode + ").";
}
alert(message);
}

5、 在google 地图上显示位置(前提是有google map api等设置好)
复制代码
代码如下:

function getCurrentLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showMyPosition,showError);
}
else
{
alert("No, Geolocation API is not supported by this browser.");
}
}
function showMyPosition(position)
{
var coordinates=position.coords.latitude+","+position.coords.longitude;
var map_url="http://maps.googleapis.com/maps/api/staticmap?center="
+coordinates+"&zoom=14&size=300x300&sensor=false";
document.getElementById("googlemap").innerHTML="<img src='"+map_url+"' />";
}
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
alert("This website does not have permission to use the Geolocation API")
break;
case error.POSITION_UNAVAILABLE:
alert("The current position could not be determined.")
break;
case error.TIMEOUT:
alert("The current position could not be determined within the specified time out period.")
break;
case error.UNKNOWN_ERROR:
alert("The position could not be determined due to an unknown error.")
break;
}
}
HTML / CSS 相关文章推荐
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
Aug 11 HTML / CSS
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
Apr 03 HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
Jul 06 HTML / CSS
HTML5语音识别标签写法附图
Nov 18 HTML / CSS
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
Aug 31 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
Oct 20 HTML / CSS
HTML5无刷新改变当前url的代码
Mar 15 HTML / CSS
使用phonegap进行本地存储的实现方法
Mar 31 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
Apr 27 HTML / CSS
Html5饼图绘制实现统计图的方法
Aug 05 HTML / CSS
为什么你写的height:100%不起作用
May 10 HTML / CSS
clear 万能清除浮动(clearfix:after)
May 21 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
Jan 04 #HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 #HTML / CSS
html5的新玩法——语音搜索
Jan 03 #HTML / CSS
HTML5 语音搜索只需一句代码
Jan 03 #HTML / CSS
HTML5 语音搜索(淘宝店语音搜素)
Jan 03 #HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
Jan 02 #HTML / CSS
使用CSS实现弹性视频html5案例实践
Dec 26 #HTML / CSS
You might like
15个小时----从修改程序到自己些程序
2006/10/09 PHP
取选中的radio的值
2010/01/11 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
javascript代码加载优化方法
2011/01/30 Javascript
用jQuery模拟页面加载进度条的实现代码
2011/12/19 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
JS实现不规则TAB选项卡效果代码
2015/09/16 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
nodejs批量下载图片的实现方法
2017/05/19 NodeJs
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
2017/09/01 jQuery
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
React精髓!一篇全概括小结(急速)
2019/05/23 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
vue离开当前页面触发的函数代码
2020/09/01 Javascript
axios封装与传参示例详解
2020/10/18 Javascript
[00:58]PWL开团时刻DAY5——十人开雾0换5
2020/11/04 DOTA
Python中input和raw_input的一点区别
2014/10/21 Python
Python开发SQLite3数据库相关操作详解【连接,查询,插入,更新,删除,关闭等】
2017/07/27 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
如何使用Python抓取网页tag操作
2020/02/14 Python
python 画图 图例自由定义方式
2020/04/17 Python
Python 忽略文件名编码的方法
2020/08/01 Python
css3+jq创作含苞待放的荷花
2014/02/20 HTML / CSS
一款基于css3麻将筛子3D翻转特效的实例教程
2014/12/31 HTML / CSS
顶丰TOPPIK台湾官网:增发纤维假发,告别秃发困扰
2018/06/13 全球购物
一套Java笔试题
2016/08/20 面试题
linux面试题参考答案(11)
2012/05/01 面试题
学院书画协会部门岗位职责
2013/12/01 职场文书
预备党员思想汇报
2014/01/08 职场文书
企业法人代表证明书
2014/09/27 职场文书
学校运动会简讯
2015/07/20 职场文书
2016年“我们的节日·清明节”活动总结
2016/04/01 职场文书
手把手教你用SpringBoot将文件打包成zip存放或导出
2021/06/11 Java/Android