HTML5 geolocation API 获得用户当前地理位置

简介:

 HTML5 里面引入了geolocation的API可以帮助用户获得浏览器所在的地理位置,它不仅可以标示出当前的经纬度,还可以与google map API结合使用来在地图上标示出当前位置。

HTML代码,主要就是2大块,第一部分的容器用于放google地图和标示位置,第二部分用于显示精确的经纬度以及精度(误差)。

 
 
  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4. <!-- 以下这段代码是googlemap官方建议的,它让用户禁止利用浏览器的放大缩小窗口功能,而使用googlemap自己的缩放功能 --> 
  5. <meta name="viewport" content="initial-scale=1.0,user-scalable=no"/> 
  6. <title>在页面上使用Google Map,获取浏览器的当前位置</title> 
  7.  
  8. <!-- 因为页面上要使用到google地图,所以导入googlemap地图文件 --> 
  9. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
  10.  
  11. <!-- 这段js文件是我自己写的,用于利用HTML5的geolocation API获得当前位置,并且在google地图上标识出来 --> 
  12. <script type="text/javascript" src="js/googlemap.js"></script> 
  13.    
  14. </head> 
  15.  
  16. <body onload="init()"> 
  17. Hello,Google Map! 
  18. <br> 
  19. <!-- 这一个正方形区域是用来画google地图的 --> 
  20. <div id="map"style="width: 400px; height: 400px"></div> 
  21. <br> 
  22. <!-- 这一个区域是用来显示你的位置信息的 --> 
  23. <h3>您的浏览器显示了您当前的地理位置信息是:</h3> 
  24. <p id="positionInfo"></p> 
  25. </body> 
  26.  
  27. </html> 

javascript方法,主要就是用于绘制地图(以及标示位置),以及给出了当获取位置成功或者失败时候的回调函数定义:

 
 
  1. //这是初始化方法,用来绘制google地图 
  2. function init() { 
  3. console.log("entering the init() method"); 
  4. //首先必须判断浏览器是否有geolocation属性,因为HTML5 才新增了这个属性,不是所有浏览器都支持 
  5. if (navigator.geolocation) { 
  6. //如果浏览器支持geolocation,则使用geolocation的getCurrentLocation方法来取得用户当前的地理位置, 
  7. //并且在成功取得之后调用show_map()回调函数 
  8. console.log(' Browser support geolocation '); 
  9. navigator.geolocation.getCurrentPosition(show_map,handle_error ,null); 
  10. else { 
  11. console.log(' Browser doesnt support geolocation '); 
  12.  
  13.  
  14.  
  15. //这是一个回调函数,用于当geolocation成功取得用户浏览器所在的地理位置时候的响应,它吧所有的位置信息封装在position中 
  16. //所以我们就需要解析position来取得用户的详细信息 
  17. function show_map(position) { 
  18.  
  19. // 取得当前的地理位置 
  20. var coords = position.coords; 
  21.   
  22. //Part 1; 显示用户的精确位置信息 
  23. //取得页面上用于显示精确位置信息的组件 
  24. var positionInfo=document.getElementById("positionInfo"); 
  25. var positionString="经度: "+coords.longitude+"<br>"
  26. positionString+="维度: "+coords.latitude+"<br>"
  27. var altitude=coords.altitude; 
  28. if( altitude!=null){ 
  29. positionString+="海拔高度"+coords.altitude+"<br>"
  30. positionString+="经纬度精确到:"+coords.accuracy+"米"+"<br>"
  31. positionInfo.innerHTML=positionString; 
  32. //Part 2; 在google地图上显示浏览器的当前位置 
  33. // 设定地图参数,将用户的当前位置的维度和精度都设定为地图的中心点 
  34. var latlng = new google.maps.LatLng(coords.latitude, coords.longitude); 
  35. var myOptions = { 
  36. // 设定放大倍数 
  37. zoom : 14, 
  38. // 将地图的中心点设定为指定的坐标点 
  39. center : latlng, 
  40. // 指定地图的类型,这里选择的是街道地图 
  41. mapTypeId : google.maps.MapTypeId.ROADMAP 
  42. }; 
  43. // 创建地图并在"map"div中显示,吧这个地图叫做map1 
  44. var map1; 
  45. map1 = new google.maps.Map(document.getElementById("map"), myOptions); 
  46. // 在地图上创建标记 
  47. var marker = new google.maps.Marker({ 
  48. //标注刚才创建的标注点,因为标注点是由当前的经纬度设定的,所以表示了当前位置 
  49. position : latlng, 
  50. //标注在哪张地图上,我们创建了map1作为google map,所以标注在map1上 
  51. map : map1 
  52. }); 
  53. // 设定标注窗口,并且指定该窗口的注释文字 
  54. var infowindow = new google.maps.InfoWindow({ 
  55. content : "这是Charles的浏览器的当前位置!" 
  56. }); 
  57. // 打开标注窗口 
  58. infoWindow.open(map1, marker); 
  59.  
  60.  
  61.  
  62.  
  63. //这是第二个回调函数,用于当geolocation获取用户浏览器所在的地理位置失败时候的响应 
  64. //error对象封装了所有的可能出现的无法获得地理位置的错误信息,并且HTML5为其预留了错误码,可以取值{1,2,3} 
  65. function handle_error(error){ 
  66. var errorTypes={ 
  67. 1:'位置服务被拒绝'
  68. 2:'获取不到位置信息'
  69. 3:'获取信息超时' 
  70. }; 
  71. console.log(errorTypes[error.code] + ":,不能确定你的当前地理位置"); 

 

要显示结果,必须让用户开启共享位置功能,因为这是隐私,我测试了下Opera 11和Firefox 10 ,Google Chrome都可以。

Opera 11开始就需要用户选择是否要共享地理位置:

然后要签一份用户协议:

 

 

对于Firefox浏览器,也是需要得到用户共享自己位置的许可:

 

 

最终,就可以显示用户当前位置了(实际是你的ip暴露了你的信息),比如我住在上海广兰路地铁站附近,所以显示结果如下:

 





本文转自 charles_wang888 51CTO博客,原文链接:http://blog.51cto.com/supercharles888/856656,如需转载请自行联系原作者

目录
相关文章
|
13天前
|
存储 JavaScript 前端开发
HTML API
HTML API
27 3
|
8月前
|
API
使用 Schematics 创建的 Spartacus Storefront,在 index.html 里指定 OCC API url
使用 Schematics 创建的 Spartacus Storefront,在 index.html 里指定 OCC API url
43 0
|
13天前
|
移动开发 前端开发 API
HTML5 Canvas 提供丰富的绘图API,支持绘制图形、文本、渐变和图像,助力游戏开发
【5月更文挑战第13天】HTML5 Canvas 提供丰富的绘图API,支持绘制图形、文本、渐变和图像,助力游戏开发。关键功能包括绘制基本形状、文本渲染、图像处理及渐变图案。在游戏开发中,Canvas用于绘制游戏元素、实现动画效果、精确的物理碰撞检测,并具有跨平台兼容性,为创造多样化视觉体验和互动游戏提供强大工具。随着技术进步,Canvas在游戏领域的应用将持续增长。
21 4
|
13天前
|
移动开发 API UED
【专栏:HTML进阶篇】HTML5拖放API与触摸事件
【4月更文挑战第30天】HTML5的拖放API和触摸事件增强了网页交互设计,使开发者能创建动态响应式界面。拖放API通过设定元素的`draggable`属性、监听拖动和放置事件以及处理`DataTransfer`对象实现。触摸事件如`touchstart`、`touchmove`、`touchend`则让触控设备操作更流畅。开发者需注意事件对象、多点触控处理和防止默认行为。结合两者,可创建图片排序、手势识别等交互功能,但也需面对浏览器兼容性和复杂逻辑挑战。利用HTML5这些工具,能提升用户体验,推动网页交互设计创新。
|
13天前
|
移动开发 前端开发 API
简述HTML5 Canvas的基本绘图API及其在游戏开发中的作用。
HTML5 Canvas 提供丰富的绘图API,用于在网页上绘制图形、动画和视觉效果,支持基本形状、文本、渐变、图像及像素操作。在游戏开发中,Canvas API用于绘制游戏元素、实现动画效果、进行物理碰撞检测,并具备跨平台兼容性,为创新游戏体验提供强有力的支持。
14 1
|
13天前
|
移动开发 API HTML5
HTML5响应式自动采集API壁纸系统源码自适应手机端
HTML5响应式自动采集API壁纸系统源码自适应手机端
44 11
HTML5响应式自动采集API壁纸系统源码自适应手机端
|
7月前
|
移动开发 JavaScript 前端开发
【前端用法】html5实现地理位置定位(JS获取当前地理位置的方法)
【前端用法】html5实现地理位置定位(JS获取当前地理位置的方法)
139 0
|
5月前
|
存储 JavaScript 前端开发
使用 HTML、CSS、JS 和 API 制作一个很棒的天气 Web 应用程序
使用 HTML、CSS、JS 和 API 制作一个很棒的天气 Web 应用程序
80 0
|
19小时前
|
监控 数据挖掘 API
京东商品API接口:电商数据自动化的钥匙
京东商品API接口为电商领域带来了巨大的便利和潜力。通过本篇文章,读者应该能够了解如何使用京东商品API接口,并通过示例代码学习如何实际调用API获取商品数据。 随着技术的不断发展,京东商品API接口将继续为电商自动化、数据分析和市场研究提供支持,帮助商家和开发者在竞争激烈的市场中保持领先。我们鼓励读者继续探索和学习,充分利用京东商品API接口带来的机遇。
|
10天前
|
监控 安全 数据挖掘
Email 接口API有哪些?具体分析一下阿里云和AOK的优点
本文介绍了常见的Email接口API,如阿里云邮件推送、AOKSend、SendGrid、Mailgun和Amazon SES。阿里云API以其高稳定性和数据分析功能脱颖而出,支持批量发送和多语言;而AOKSend API以易于集成、高安全性和优秀客户支持为亮点。企业在选择时应考虑自身需求和预算,以优化邮件营销效果。