来自：http://blog.csdn.net/dawanganban/article/details/18192091

在前面的《小强的HTML5移动开发之路（2）——HTML5的新特性》中介绍了关于HTML5的地理定位功能，这一篇我们来详细了解一下怎么使用该功能。

HTML5 Geolocation API用于获得用户的地理位置。

鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的，在使用该功能的时候浏览器会弹出提醒框。

一、地理定位的几种方式

IP地址、GPS、Wifi、GSM/CDMA

二、地理位置获取流程

1、用户打开需要获取地理位置的web应用。

2、应用向浏览器请求地理位置，浏览器弹出询问，询问用户是否共享地理位置。

3、假设用户允许，浏览器从设别查询相关信息。

4、浏览器将相关信息发送到一个信任的位置服务器，服务器返回具体的地理位置。

三、浏览器的支持

IE9.0+、FF3.5+、Safari5.0+、Chrome5.0+、Opera10.6+ 支持地理定位。

注释：对于拥有 GPS 的设备，比如 iPhone（IPhone3.0+、Android2.0+），地理定位更加精确。

四、HTML5中地理位置定位的方法

GeolocationAPI存在于navigator对象中，只包含3个方法：

1、getCurrentPosition   //当前位置

2、watchPosition           //监视位置

3、clearWatch               //清除监视

五、地理定位方法getCurrentPosition()

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <p id="demo">点击这个按钮，获得您的坐标：</p>
  5. <button onclick="getLocation()">试一下</button>
  6. <script>
  7. var x=document.getElementById("demo");
  8. function getLocation(){
  9. if (navigator.geolocation){  //判断是否支持地理定位
  10. //如果支持，则运行getCurrentPosition()方法。
  11. navigator.geolocation.getCurrentPosition(showPosition);
  12. }else{
  13. //如果不支持，则向用户显示一段消息
  14. x.innerHTML="Geolocation is not supported by this browser.";
  15. }
  16. }
  17. //获取经纬度并显示
  18. function showPosition(position){
  19. x.innerHTML="Latitude: " + position.coords.latitude +
  20. "<br />Longitude: " + position.coords.longitude;
  21. }
  22. </script>
  23. </body>
  24. </html>

getCurrentPosition(success,error,option)方法最多可以有三个参数：

getCurrentPosition()方法第一个参数回调一个showPosition()函数并将位置信息传递给该函数，从该函数中获取位置信息并显示，

getCurrentPostion()方法第二个参数用于处理错误信息，它是获取位置信息失败的回调函数

getCurrentPostion()方法第三个参数是配置项，该参数是一个对象，影响了获取位置的细节。

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <p id="demo">点击这个按钮，获得您的坐标：</p>
  5. <button onclick="getLocation()">试一下</button>
  6. <script>
  7. var x=document.getElementById("demo");
  8. function getLocation(){
  9. if (navigator.geolocation){  //判断是否支持地理定位
  10. //如果支持，则运行getCurrentPosition()方法。
  11. navigator.geolocation.getCurrentPosition(showPosition,showError);
  12. }else{
  13. //如果不支持，则向用户显示一段消息
  14. x.innerHTML="Geolocation is not supported by this browser.";
  15. }
  16. }
  17. //获取经纬度并显示
  18. function showPosition(position){
  19. x.innerHTML="Latitude: " + position.coords.latitude +
  20. "<br />Longitude: " + position.coords.longitude;
  21. }
  22. //错误处理函数
  23. function showError(error){
  24. switch(error.code)  //错误码
  25. {
  26. case error.PERMISSION_DENIED:  //用户拒绝
  27. x.innerHTML="User denied the request for Geolocation."
  28. break;
  29. case error.POSITION_UNAVAILABLE:  //无法提供定位服务
  30. x.innerHTML="Location information is unavailable."
  31. break;
  32. case error.TIMEOUT:  //连接超时
  33. x.innerHTML="The request to get user location timed out."
  34. break;
  35. case error.UNKNOWN_ERROR:  //未知错误
  36. x.innerHTML="An unknown error occurred."
  37. break;
  38. }
  39. }
  40. </script>
  41. </body>
  42. </html>

六、在Google地图中显示结果

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <p id="demo">点击这个按钮，获得您的位置：</p>
  5. <button onclick="getLocation()">试一下</button>
  6. <div id="mapholder"></div>
  7. <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
  8. <script>
  9. var x=document.getElementById("demo");
  10. function getLocation(){
  11. if (navigator.geolocation){
  12. navigator.geolocation.getCurrentPosition(showPosition,showError);
  13. }else{
  14. x.innerHTML="Geolocation is not supported by this browser.";
  15. }
  16. }
  17. function showPosition(position){
  18. lat=position.coords.latitude;
  19. lon=position.coords.longitude;
  20. latlon=new google.maps.LatLng(lat, lon)
  21. mapholder=document.getElementById('mapholder')
  22. mapholder.style.height='250px';
  23. mapholder.style.width='500px';
  24. var myOptions={
  25. center:latlon,zoom:14,
  26. mapTypeId:google.maps.MapTypeId.ROADMAP,
  27. mapTypeControl:false,
  28. navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
  29. };
  30. var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
  31. var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
  32. }
  33. function showError(error){
  34. switch(error.code){
  35. case error.PERMISSION_DENIED:
  36. x.innerHTML="User denied the request for Geolocation."
  37. break;
  38. case error.POSITION_UNAVAILABLE:
  39. x.innerHTML="Location information is unavailable."
  40. break;
  41. case error.TIMEOUT:
  42. x.innerHTML="The request to get user location timed out."
  43. break;
  44. case error.UNKNOWN_ERROR:
  45. x.innerHTML="An unknown error occurred."
  46. break;
  47. }
  48. }
  49. </script>
  50. </body>
  51. </html>

七、在百度地图中显示结果

1、去百度开发者获取地图显示密钥

http://developer.baidu.com/map/jshome.htm

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <p id="demo">点击这个按钮，获得您的位置：</p>
  5. <button onclick="getLocation()">试一下</button>
  6. <div id="mapholder" style="width:600px;height:500px;"></div>
  7. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你自己的密钥"></script>
  8. <script>
  9. var x=document.getElementById("demo");
  10. function getLocation(){
  11. if (navigator.geolocation){
  12. navigator.geolocation.getCurrentPosition(showPosition,showError);
  13. }else{
  14. x.innerHTML="Geolocation is not supported by this browser.";
  15. }
  16. }
  17. function showPosition(position){
  18. //alert(position.coords.longitude + " ___ " + position.coords.latitude);
  19. // 百度地图API功能
  20. var map = new BMap.Map("mapholder");            // 创建Map实例
  21. var point = new BMap.Point(position.coords.longitude, position.coords.latitude);    // 创建点坐标
  22. map.centerAndZoom(point,15);                     // 初始化地图,设置中心点坐标和地图级别。
  23. map.enableScrollWheelZoom();
  24. }
  25. function showError(error){
  26. switch(error.code){
  27. case error.PERMISSION_DENIED:
  28. x.innerHTML="User denied the request for Geolocation."
  29. break;
  30. case error.POSITION_UNAVAILABLE:
  31. x.innerHTML="Location information is unavailable."
  32. break;
  33. case error.TIMEOUT:
  34. x.innerHTML="The request to get user location timed out."
  35. break;
  36. case error.UNKNOWN_ERROR:
  37. x.innerHTML="An unknown error occurred."
  38. break;
  39. }
  40. }
  41. </script>
  42. </body>
  43. </html>

注意：如果拷贝上面代码，请将“你自己的密钥”替换为在百度开发者中心申请的密钥

可以看到Google Map 和百度地图的定位参考不同，所以用ip定位误差很大。

八、getCurrentPosition()方法—返回数据

若成功，则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性。

属性 描述
coords.latitude 十进制数的纬度
coords.longitude 十进制数的经度
coords.accuracy 位置精度
coords.altitude 海拔，海平面以上以米计
coords.altitudeAccuracy 位置的海拔精度
coords.heading 方向，从正北开始以度计
coords.speed 速度，以米/每秒计
timestamp 响应的日期/时间

还可以获得地理位置（只有firefox支持)

p.address.country   国家

p.address.region    省份

p.address.city          城市

九、监视位置（移动设备中）

watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。

clearWatch() - 停止 watchPosition() 方法

下面的例子展示 watchPosition() 方法

watchPosition像一个追踪器与clearWatch成对。

watchPosition与clearWatch有点像setInterval和clearInterval的工作方式。

varwatchPositionId =navigator.geolocation.watchPosition(success_callback,error_callback,options);

navigator.geolocation.clearWatch(watchPositionId );

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <p id="demo">点击这个按钮，获得您的坐标：</p>
  5. <button onclick="getLocation()">试一下</button>
  6. <script>
  7. var x=document.getElementById("demo");
  8. function getLocation()
  9. {
  10. if (navigator.geolocation)
  11. {
  12. navigator.geolocation.watchPosition(showPosition);
  13. }
  14. else{x.innerHTML="Geolocation is not supported by this browser.";}
  15. }
  16. function showPosition(position)
  17. {
  18. x.innerHTML="Latitude: " + position.coords.latitude +
  19. "<br />Longitude: " + position.coords.longitude;
  20. }
  21. </script>
  22. </body>
  23. </html>

小强的HTML5移动开发之路（18）——HTML5地理定位的更多相关文章

  1. 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较

    一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...

  2. 小强的HTML5移动开发之路（14）——Video标签详解

    来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...

  3. 小强的HTML5移动开发之路（13）——HTML5中的全局属性

    来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey  快捷键 <!DOCTYPE HTML> ...

  4. 小强的HTML5移动开发之路（11）——链接，图片，表格，框架

    来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...

  5. 小强的HTML5移动开发之路（37）——jqMobi快速入门

    在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...

  6. 小强的HTML5移动开发之路（21）—— PhoneGap

    一.PhoneGap是什么 PhoneGap 是一个用基于 HTML,CSS 和 JavaScript 的,创建移动跨平台移动应用程序的快速开发框架.它使开发者能够利用 iPhone,Android, ...

  7. 小强的HTML5移动开发之路（12）——从一个多媒体标签说起

    来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...

  8. 小强的HTML5移动开发之路（3）——HTML5与HTML4比较

    来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...

  9. 小强的HTML5移动开发之路（1）——HTML介绍

    来自:http://blog.csdn.net/dawanganban/article/details/17591373 HTML是HyperText Markup Language(超文本标记语言) ...

随机推荐

  1. 工作流程，编程，调试，性能：Unity游戏开发者应该学习的20个改进技巧

    Unity 是一个备受欢迎的游戏开发平台.它的功能令人印象深刻,同时也迎合了不同的游戏开发需求.游戏开发者可以使用 Unity 创建任何类型的游戏,从世界级的 RPG 游戏到最流行的增强现实游戏 Po ...

  2. 用tensorlayer导入Slim模型迁移学习

    上一篇博客[用tensorflow迁移学习猫狗分类]笔者讲到用tensorlayer的[VGG16模型]迁移学习图像分类,那麽问题来了,tensorlayer没提供的模型怎么办呢?别担心,tensor ...

  3. 微信小程序基础之开源项目库汇总

    awesome-github-wechat-weapp 是由OpenDigg整理并维护的微信小程序开源项目库集合.我们会定期同步OpenDigg上的项目到这里,也欢迎各位提交项目给我们. (链接:ht ...

  4. dubbo安装

    dubbo 管控台可以对注册到 zookeeper 注册中心的服务或服务消费者进行管理,分享牛系列,分享牛专栏,分享牛.但管控台是否正常对 Dubbo 服务没有影响,管控台也不需要高可用,因此可以单节 ...

  5. 浅析深度学习mini_batch的BP反传算法

    在深度学习中,如果我们已经定义了网络,输入,以及输出,那么接下来就是损失函数,优化策略,以及一般由框架完成的BP反传.这篇博文我们主要探讨一下深度的BP反传算法(以梯度下降为例),尤其是mini_ba ...

  6. Node.js 撸第一个Web应用

    使用Node.js 创建Web 应用与使用PHP/Java 语言创建Web应用略有不同. 使用PHP/Java 来编写后台代码时,需要Apache 或者 Nginx 的HTTP 服务器,而接受请求和提 ...

  7. [Python监控]psutil模块简单使用

    安装很简单 pip install psutil 官网地址为 https://pythonhosted.org/psutil/ (文档上有详细的api) github地址为 https://githu ...

  8. Strom数据流分组解析

    本文可作为 <<Storm-分布式实时计算模式>>一书1.5节的读书笔记 数据流分组定义了一个数据流中的tuple如何分发给topology中不同bolt的task. Shuf ...

  9. Python模块探秘之EasyGui

    在Windows想用Python开发一些简单的界面,所以找到了很容易上手的EasyGui库.下面就分享一下简单的使用吧. 参考的链接:官网Tutorial 接下来,我将从简单,到复杂一点点的演示如何使 ...

  10. 在github上最热门好评高的ROS相关功能包

    在github上最热门最受欢迎的ROS相关功能包 下面依次列出,排名不分先后: 1  Simulation Tools In ROS https://github.com/ros-simulation ...