开发者社区> 科技小能手> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

HTML5 geolocation和BaiduMap、BingMap、GoogleMap

简介:
+关注继续查看

 HTML5的地理位置定位感觉是很cool的能力,我们公司原先的定位是在android上完成的,现在我来尝试下使用HTML5的geolocation来做些事情看看。

 

 

 

HTML5的地理定位的采集方式:1. IP地址,2. GPS定位,3. MAC地址,4. GSM基站网络,5. 用户定义的地址位

老规矩,先简单的尝试下geolocationAPI应用

先HTML的代码,那是相当简单


  1. [html] view plaincopy 
  2. <body>  
  3. <input type="button" value="get Geo" />  
  4. </body> 
  5.  
  6. javaScript的代码如下 
  7. [javascript] view plaincopy 
  8. $(  
  9. function() {  
  10. $(":button").click(  
  11. function() {  
  12. navigator.geolocation.getCurrentPosition(  
  13. function(e) { //成功回调  
  14. $.log(e.coords.accuracy); //准确度  
  15. $.log(e.coords.latitude); //纬度  
  16. $.log(e.coords.longitude); //经度  
  17. $.log(e.coords.altitude); //海拔高度  
  18. $.log(e.coords.altitudeAccuracy); //海拔高度的精确度  
  19. $.log(e.coords.heading); //行进方向  
  20. $.log(e.coords.speed); //地面的速度  
  21. $.log(new Date(e.timestamp).toLocaleDateString());//采集日期  
  22. $.log(new Date(e.timestamp).toLocaleTimeString());//采集时间  
  23. },  
  24. function(e) { //失败回调  
  25. $.log(e.message); //错误信息  
  26. $.log(e.code); //错误代码  
  27. },  
  28. {//可选参数 JSON格式  
  29. "enableHighAcuracy": false, //是否启用高精确度模  
  30. "timeout": 100, //在指定的时间内获取位置信息  
  31. "maximumAge": 0//浏览器重新获取位置信息的时间间隔  
  32. }  
  33. );  
  34. }  
  35. );  
  36. }  
  37. ); 

现在你点击按钮,就可以在控制台看到经纬度和采样日期时间了。
那获得了经纬度的值,必然首先要做的就是地图定位了,现在主流的地图服务我知道的有:baidu,google,和bing,下面我来测试我们得到的经纬度在这三个地图服务中取得的地图图像吧。

baidu和bing我都查了官方的sample,但是,但是,我要狠狠的批评google,我用chrome浏览器访问googleMapApi中的sample,竟然chrome告诉我“由于 google-developers.appspot.com 响应时间过长,导致“Google Chrome 浏览器”无法加载网页。该网站可能已崩溃,或者您的互联网连接出现了问题。”google,你看着办吧。

 

先看看我们的body


  1. [javascript] view plaincopy 
  2. <body>  
  3. <div>  
  4. <input type="button" value="get Geo" />  
  5. </div>  
  6. <div id="baiduMap" style="width: 300px; height: 300px; float: left;">  
  7. </div>  
  8. <div id="googleMap" style="width: 300px; height: 300px; float: left;">  
  9. </div>  
  10. <div id="bingMap" style="width: 300px; height: 300px; float: left; position: relative;">  
  11. </div>  
  12. </body> 

然后引入三家的服务脚本


  1. [javascript] view plaincopy 
  2. <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>  
  3.  
  4. <script src="http://maps.google.com/maps/api/js?sensor=false"></script>  
  5.  
  6. <script charset="UTF-8" type="text/javascript" src="http://dev.ditu.live.com/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us"></script> 

以下是测试代码


  1. [javascript] view plaincopy 
  2. $.log = function(msg) {  
  3. console.log(msg);  
  4. }  
  5.  
  6. $(  
  7. function() {  
  8. $(":button").click(  
  9. function() {  
  10. navigator.geolocation.getCurrentPosition(  
  11. function(e) { //成功回调  
  12. $.log(e.coords.accuracy); //准确度  
  13. $.log(e.coords.latitude); //纬度  
  14. $.log(e.coords.longitude); //经度  
  15. $.log(e.coords.altitude); //海拔高度  
  16. $.log(e.coords.altitudeAccuracy); //海拔高度的精确度  
  17. $.log(e.coords.heading); //行进方向  
  18. $.log(e.coords.speed); //地面的速度  
  19. $.log(new Date(e.timestamp).toLocaleDateString()); //采集日期  
  20. $.log(new Date(e.timestamp).toLocaleTimeString()); //采集时间  
  21. createBaiduMap(e.coords.longitude, e.coords.latitude);  
  22. createBingMap(e.coords.longitude, e.coords.latitude);  
  23. createGoogleMap(e.coords.longitude, e.coords.latitude);  
  24. },  
  25. function(e) { //失败回调  
  26. $.log(e.message); //错误信息  
  27. $.log(e.code); //错误代码  
  28. },  
  29. {//可选参数 JSON格式  
  30. enableHighAcuracy: false, //是否启用高精确度模  
  31. timeout: 100, //在指定的时间内获取位置信息  
  32. maximumAge: 0//浏览器重新获取位置信息的时间间隔  
  33. }  
  34. );  
  35. }  
  36. );  
  37. }  
  38. );  
  39.  
  40.  
  41. function createBaiduMap(longitude, latitude) {  
  42. var map = new BMap.Map("baiduMap");  
  43. var point = new BMap.Point(longitude, latitude);  
  44. map.centerAndZoom(point, 15);  
  45. }  
  46.  
  47. function createGoogleMap(longitude, latitude) {  
  48. var map = new google.maps.Map(document.getElementById("googleMap"),  
  49. {  
  50. center: new google.maps.LatLng(latitude, longitude),  
  51. zoom: 14,  
  52. mapTypeId: google.maps.MapTypeId.ROADMAP,  
  53. mapTypeControl: false,  
  54. navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL }  
  55. }  
  56. );  
  57. }  
  58.  
  59. function createBingMap(longitude, latitude) {  
  60. var map = new VEMap("bingMap");  
  61. var LA = new VELatLong(latitude, longitude);  
  62. map.LoadMap(LA, 14, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1);  

基本代码完成后,我们看到googleMap(以后简称gm)和bingMap(以后简称mm)默认有缩放都控制器,baiduMpa(以后简称bm)没有带,现在为bm加上控制器


  1. [javascript] view plaincopy 
  2. function createBaiduMap(longitude, latitude) {  
  3. var map = new BMap.Map("baiduMap");  
  4. var point = new BMap.Point(longitude, latitude);  
  5. map.centerAndZoom(point, 15);  
  6. map.addControl(new BMap.NavigationControl());  

为bm添加了一个NavigationControl就可以看到效果了。
现在我们想在地图上做一个标注,把我们给点的经纬度标注出来,同时我们也看看地图服务商和HTML5的定位是不是比较准,三个地图服务商的加标注代码如下


  1. [javascript] view plaincopy 
  2. function createBaiduMap(longitude, latitude) {  
  3. var map = new BMap.Map("baiduMap");  
  4. var point = new BMap.Point(longitude, latitude);  
  5. map.centerAndZoom(point, 15);  
  6. map.addControl(new BMap.NavigationControl());  
  7. var marker = new BMap.Marker(point); //标注  
  8. marker.setLabel(new BMap.Label("我在这里"));  
  9. map.addOverlay(marker);  
  10. }  
  11.  
  12. function createGoogleMap(longitude, latitude) {  
  13. var map = new google.maps.Map(document.getElementById("googleMap"),  
  14. {  
  15. center: new google.maps.LatLng(latitude, longitude),  
  16. zoom: 14,  
  17. mapTypeId: google.maps.MapTypeId.ROADMAP,  
  18. mapTypeControl: false,  
  19. navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL }  
  20. }  
  21. );  
  22. var marker = new google.maps.Marker({ position: new google.maps.LatLng(latitude, longitude),  
  23. map: map,  
  24. title: "我在这里" });  
  25. }  
  26.  
  27. function createBingMap(longitude, latitude) {  
  28. var map = new VEMap("bingMap");  
  29. var LA = new VELatLong(latitude, longitude);  
  30. map.LoadMap(LA, 14, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1); //图钉  
  31. var myPolygon = new VEShape(VEShapeType.Pushpin, new VELatLong(latitude, longitude, 0, VEAltitudeMode.Default));  
  32. map.AddShape(myPolygon);  
  33. myPolygon.SetTitle("我在这里");  
  34.  

如果我在移动设备上进行采集数据的话,geo提供了一个异步的API:watchPosition,这个api是异步的,文档上说:当检测到设备的位置发生改变时,它返回设备的当前位置。当设备检索到一个新的位置,会触发geolocationSuccess回调函数并传递一个Position对象作为参数。如果发生错误,会触发geolocationError回调函数并传递一个PositionError对象。不过具体我还没有测试
代码和getCurrentPosition很像的


  1. [javascript] view plaincopy 
  2. $(  
  3. function() {  
  4. $(":button").click(  
  5. function() {  
  6. navigator.geolocation.watchPosition(  
  7. function(e) { //成功回调  
  8. $.log(e.coords.accuracy); //准确度  
  9. $.log(e.coords.latitude); //纬度  
  10. $.log(e.coords.longitude); //经度  
  11. $.log(e.coords.altitude); //海拔高度  
  12. $.log(e.coords.altitudeAccuracy); //海拔高度的精确度  
  13. $.log(e.coords.heading); //行进方向  
  14. $.log(e.coords.speed); //地面的速度  
  15. $.log(new Date(e.timestamp).toLocaleDateString()); //采集日期  
  16. $.log(new Date(e.timestamp).toLocaleTimeString()); //采集时间  
  17. createBaiduMap(e.coords.longitude, e.coords.latitude);  
  18. createBingMap(e.coords.longitude, e.coords.latitude);  
  19. createGoogleMap(e.coords.longitude, e.coords.latitude);  
  20. },  
  21. function(e) { //失败回调  
  22. $.log(e.message); //错误信息  
  23. $.log(e.code); //错误代码  
  24. },  
  25. {//可选参数 JSON格式  
  26. enableHighAcuracy: false, //是否启用高精确度模  
  27. timeout: 10, //在指定的时间内获取位置信息  
  28. maximumAge: 10, //浏览器重新获取位置信息的时间间隔  
  29. frequency: 1000//每隔3秒钟检索一次位置信息  
  30. }  
  31. );  
  32. }  
  33. );  
  34. }  
  35. ); 

 

要停止这个轮询,只要用navigator.geolocation.clearWatch就可以了。


本文转自shyleoking 51CTO博客,原文链接:http://blog.51cto.com/shyleoking/863993


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
HTML之文本格式化、链接、头部、CSS(笔记小结)
HTML之文本格式化、链接、头部、CSS(笔记小结)
0 0
【前端】css布局html页面之inline-block布局错位解决方法
本篇文章中,主要讲讲前端布局的情况 对于,对于刚接触前端开发的小伙伴来说,布局是一个比较重要的知识点,如果知识点理解不到位,那么很容易出现布局错位的情况
0 0
通过DOM对HTML文档的元素内容和CSS样式进行操作
通过DOM对HTML文档的元素内容和CSS样式进行操作 通过前面的学习我们应该可以了解到,通过DOM我们可以操作HTMl文档中的任意的元素及属性,文本内容。其实实际工作中我们用到最多的是怎样通过DOM操作HTML文档中的CSS样式。 HTML代码: <button id="btn">切换</button> <div class="wrap" id="wrap" style="color: yellow;"> <p id="text" class="text">这是一个段落</p> <ul class="list">
0 0
前端三要素:HTML、CSS、JavaScript介绍以及三者的关系理解
前端三要素:HTML、CSS、JavaScript介绍以及三者的关系理解
0 0
用HTML+CSS构建一个绚丽的登录页面
自动切换背景,登录页面,水滴效果,绚丽的登录页面
0 0
HTML+CSS实现商品介绍模考(以Apple14为案例)
本文以最通俗易懂的语言为读者提供一个经典CSS小案例,商品介绍模块,并且结合时事,以Apple14为案例进行讲解。
0 0
实训-利用HTML+CSS制作某米官网首页(二)
实训-利用HTML+CSS制作某米官网首页
0 0
实训-利用HTML+CSS制作某米官网首页(一)
实训-利用HTML+CSS制作某米官网首页
0 0
实训-利用HTML+CSS做响应式项目网页
实训-利用HTML+CSS做响应式项目网页
0 0
教你用HTML+CSS实现百叶窗动画效果
我们浏览网页的时候总能看见一些炫酷的特效,比如百叶窗效果,本文我们就用HTML+CSS制作一个百叶窗小项目,适合刚学前端的小伙伴,使用代码简单易懂,很容易上手,学习完本文后,相信你也能敲出来属于自己的百叶窗效果,改变图片及相应盒子的大小,有女朋友的可以试着放几张在一起的照片,也是一件非常浪漫的事
0 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
天猫 HTML5 互动技术实践
立即下载
天猫HTML5互动技术实践
立即下载
《零基础HTML入门教程》
立即下载