利用MapabcAPI实现基于浏览器的地理定位

现在互联网中有了越来越多的地理位置服务,正在制定中的HTML5规范也试图在浏览器中内置嵌入地理位置共享服务,而且幸运的是,我们已经能够在Firefox 3.5+、Chrome 5.0+、Opera 10.60+、Safari 5.0+ 以及一些移动终端,注入IPhone、Android上使用这项服务,那么这个服务能否有Mapabc的API结合,来实现用户的地理定位呢?

传统上,地图应用上为用户定位的方式一般是:

用户访问时获得用户的IP。 用这个IP到IP库中匹配用户的城市信息。 根据获取的城市信息去已有的城市中心点字典中进行匹配。 匹配完成后将用户地图的中心点进行相应的切换。

这个过程繁琐,而且准确性极大程度上依赖于我们IP库的准确程度。现在有了浏览器的位置共享服务,我们可以更容易的实现用户的地理定位。

Geolocation对象介绍

正如开头所讲的,到目前为止,W3C中deGeolocation API规范已经在非IE的浏览中得到了实现。规范中提到,浏览器提供位置信息的来源是不固定的,可能是GPS、也可能来自于IP地址、RFID、WiFi、蓝牙或者GSM\CDMA的定位信息,也不保证返回的结果一定准确。Geolocation的API同时对“只获得一次”定位和“持续监督”定位都做出了规定。

Geolocation的一些方法

Geolocation对象位于浏览器Navigator对象下,可以通过 navigator.geolcation 来访问,不支持 geolocation 的浏览器不会包含这一对象,不会造成错误,可以用来做浏览器的区分。

if ( navigator.geolcation ){     alert(‘ Your Browser dosent support geolcocation '); } else{     alert(‘ Your Browser support geolocation’); }

在访问 geolocation 对象时,浏览器会进行提示,询问用户使用许可对网站提供位置服务,得到用户的许可后,访问才会继续,否则会被停止。而且,我们可以捕捉到用户同意或者拒绝的事件。

在获得用户的学科之后,就可以利用Geolocation获取当前位置,核心方法如下:

navigator.geolocation.getCurrentPosition( getPositionSuccess , getPositionError );

上面的代码中,调用了 getCurrentPosition 方法,并且传递了两个回调函数的参数,分别用来处理位置获取成功和失败时的情况。实事上,这个函数还可以接受第三个参数,用来传入一些配置信息,包括对于超时的设置等。下面来看两个获取成功和获取失败时,回调函数的处理。

获取地理信息成功的错误处理信息 function getPositionSuccess ( position ) {   var lat = position.coords.latitude;   var lng = position.coords.longitude;   alert( ‘Now you are lat – lng ‘); } 获取地理位置失败的回调函数 function getPositionError( error ){     switch(error.code)          case error.TIMEOUT;           //Do something           break;           case error.PERMISSION_DENIED;           //Do something           break;           case error.POSITION_UNAVAILIABLE;           //Do something           break; }

获取地理位置信息的配置变量。在填入获取地理位置信息变量时,能够对获取地理位置的一些细节进行影响。下面是目前包括的几个具体参数

In ECMAScript, the enableHighAccuracy, timeout and maximumAge properties are all optional: when creating a PositionOptions object, the developer may specify any of these properties.

刚才也提到,我们还可以对地理位置进行持续的追踪,这是需要用到 watchPosition 方法。

因为对于移动设备的用户来说,位置并不是固定的,我们需要来处理这种移动客户端的情况,而不是每次要提醒用户去刷新浏览器来更新位置。

navigator.geolocation.watchPosition( refreshPosition );

与Mapabc API的整合

看完上面的关于 geolocation 的介绍之后,我们就可以将这个服务与Mapabc API一起,整合到我们的应用中了。下面是一个具体的实现样例,供参考:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head>     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <div>     <div id="mapobj" style="width:500px; height:500px; border:1px solid black;"></div>     <div id="info"></div>     <input type="button" id="getPos" value="Get My Position" /> </div> <script src="http://app.mapabc.com/apis?&t=flashmap&v=2.3.4&key=0c3235346b1e00772eafe1c099f4b23fe5ec1202d393f952395e628567934baceedcaf1508ea044f" type="text/javascript"></script> <script type="text/javascript">     function getPositionSuccess( position ){         var lat = position.coords.latitude;         var lng = position.coords.longitude;         //alert( "您所在的位置: 经度" + lat + ",纬度" + lng );         var mapOptions = new MMapOptions();//构建地图辅助类         mapOptions.zoom=13;//设置地图zoom级别         mapOptions.center=new MLngLat(lng,lat);   //设置地图中心点         mapOptions.toolbar = MINI;//工具条         mapOptions.toolbarPos = new MPoint(15,15);  //工具条偏移         mapOptions.overviewMap = SHOW;//是否显示鹰眼         mapOptions.scale = SHOW;//是否显示比例尺         mapOptions.returnCoordType = COORD_TYPE_OFFSET;//返回偏移明码坐标         mapOptions.zoomBox = true;//鼠标滚轮缩放和双击放大时是否有红框动画效果。         mapabc.map=new MMap("mapobj",mapOptions); //地图初始         if(typeof position.address !== "undefined"){                 var country = position.address.country;                 var province = position.address.region;                 var city = position.address.city;                 alert(' 您位于 ' + country + province + '省' + city +'市');         }     }     function getPositionError( error ){         switch(error.code){             case error.TIMEOUT :                 alert( " 连接超时,请重试 " );                 break;             case error.PERMISSION_DENIED :                 alert( " 您拒绝了使用位置共享服务,查询已取消 " );                 break;             case error.POSITION_UNAVAILABLE :                 alert( " 亲爱的火星网友,非常抱歉,我们暂时无法为您所在的星球提供位置服务 " );                 break;         }     }     var dom = {         btn    : document.getElementById("getPos"),         info: document.getElementById("info"),         map    : document.getElementById("mapObj")     };     var mapabc = {         map        : null,         marker    : null     };     dom.btn.onclick = function(){         if( navigator.geolocation ){             dom.info.innerHTML = "Waiting for the geolocation result...";             navigator.geolocation.getCurrentPosition( getPositionSuccess, getPositionError );                } else {             dom.info.innerHTML = "Your browser doesn't support geolocation.";         }     } </script> </body> </html>

上面的代码,会在地图显示后询问用户是否共享位置信息,如果共享则会切换地图中心点到相应的位置。当然,我们可以在自己的应用中更加灵活的使用位置共享服务,既然有了这么 Cool 的服务支持,我们还等什么呢。

参考资料:

1、Blueidea BBS 2、Geolocation API Specification 3、Mapabc API

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android机动车

我的第一个RN项目——趣闻

之前利用自己的业余时间入门了微信小程序,并写了一个入门项目 我的第一个微信小程序-趣闻 ,整体效果和之前写的 kotlin-android 版的 趣闻 模块和功...

611
来自专栏张戈的专栏

博客网页导致电脑CPU飙升的问题解决记录

已经有好几个访客朋友匿名反馈只要打开我的博客电脑的 CPU 就狂转: ? 因为忙一直也没当一回事,一是我自己的 MacbookAir 打开并没有异常,二是因为我...

3889
来自专栏达摩兵的技术空间

app中的webview通识篇(上)

如果你还是第一次与app合作开发webview的页面,那么对于如何调试,可能有哪些问题可能是不够了解的。本文尝试性的根据自己的经验给大家一个入门级别的了解,如果...

6542
来自专栏腾讯Bugly的专栏

【Dev Club分享】iOS黑客技术大揭秘

Dev Club 是一个交流移动开发技术,结交朋友,扩展人脉的社群,成员都是经过审核的移动开发工程师。每周都会举行嘉宾分享,话题讨论等活动。 本期,我们邀请了腾...

3926
来自专栏非著名程序员

Android 教程:开启 Chrome 的阅读模式

? 如今许多网站版面上都排布着一些大大小小的广告,这些无关内容不仅侵蚀版面,也在一定程度上干扰我们阅读。为了营造一个干净的阅读环境,一些浏览器内置了阅读模式。...

2.2K8
来自专栏轮子工厂

这些超实用的电脑快捷键,你都get到了吗?

不知道小伙伴们经常是不是看到一些电脑操作大神,在键盘上“啪啪啪”敲两下就能解决很多事情,既高效又帅气。

702
来自专栏张戈的专栏

实测Nginx服务器开启pagespeed加速效果

上周有一个站长问到我一个问题,问 fastcgi_cache 和 pagespeed 加速有没有冲突。略微想了下,2 个都是比较原生的主,应该不存在兼容问题。 ...

6119
来自专栏XAI

Discuz X3.1 论坛修改的方法

本人在实际操作中遇到的一些问题。自己的找资料修改并记录下来。希望看的人能赞一下。不要直接复制粘贴走。转载注明出处哦!如果有想咨询的可以加QQ:783021975...

59713
来自专栏大数据文摘

手把手 | 范例+代码:一文带你上手Python网页抓取神器BeautifulSoup库

2093
来自专栏西枫里博客

宝塔面板下phpMyadmin曝502错误,无法正常使用

前几天修改博客界面,由于本地只有很少几篇测试文章,对内容溢出的测试不完全,虽然复制了一堆无用的内容在里面进行测试。今天就想到把服务器上的数据和本地同步一下。

2111

扫码关注云+社区

领取腾讯云代金券