基于浏览器的HTML5地理定位

Posted 一片天空

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于浏览器的HTML5地理定位相关的知识,希望对你有一定的参考价值。

地理位置(Geolocation)是 html5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用。今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理和一个基于浏览器的HTML5地理定位的小demo,获取浏览器经纬度,并用腾讯地图(大家可以选择自己喜欢的地图)显示出来,实现的最终效果如下图所示:

检测浏览器是否支持:

 if (navigator.geolocation) {

    //console.log("浏览器支持!");

 }

else {

    // console.log("浏览器不支持!");

 }

、navigator.geolocation用于获取基于浏览器的当前用户地理位置,提供了3个方法:

 

void getCurrentPosition(onSuccess,onError,options);

//获取用户当前位置

 

int watchCurrentPosition(onSuccess,onError,options);

//持续获取当前用户位置

 

void clearWatch(watchId);

//watchId 为watchCurrentPosition返回的值

//取消监控

 

参数详细说明见下表:

参数

功能

返回参数

是否必选

onSuccess

方法成功时候的回调,返回position对象,通过这个对象可以获取地理位置的相关信息

Coords

 

返回当前位置的坐标

 

Coordinates

必须

Timestamp

 

返回获取坐标信息的时间

 

字符串

onError

方法失败时候的回调,返回error对象,通过这个对象返回错误类型

Code

 

返回代表错误类型的代码

 

有如下数值 :

1用户未授权使用地理定位功能

2不能确定位置

3请求位置的尝试已超时

可选

message

 

返回描述错误的字符串

 

字符串

options

额外参数

enableHighAccuracy

 

告诉浏览器我们希望得到可能的高精度的地理信息

 

布尔值

可选

timeout

 

限制请求位置的时间,设置多少毫秒后会报告一个超时错误

 

数值

maximumAge

 

告诉浏览器我们愿意接受缓存过的位置,只要它不早于指定的毫秒数

 

数值

 

三、代码实现

1、实现原理:html5地理定位 + 腾讯地图

2、实现思路:

  ① 判断浏览器是否支持geolocation地理定位

  ② 用HTML5 Geolocation API (地理位置应用程序接口)获取经纬度

  ③ 调用腾讯地图接口,将获取到的经纬度以参数形式参入腾讯地图地理坐标中,并显示到页面上

PS:也可以调用百度地图、谷歌地图、高德地图等,只需要将HTML5 Geolocation API获取到的值传入到相应的地图接口中

3、代码实现:

  ①调用腾讯地图javascript API,URL路径为:http://map.qq.com/api/js?v=2.exp

  ②核心代码:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
 7 <meta name="format-detection"content="telephone=no">
 8 <title>基于浏览器的HTML5地理定位</title>
 9 <link rel="stylesheet" href="style/style.css">
10 </head>
11 <body>
12     <div id="container"></div>
13     <div id="info"></div>
14     <script src="http://map.qq.com/api/js?v=2.exp" type="text/javascript"></script> 
15     <script>
16           var clientWidth = document.documentElement.clientWidth,
17               clientHeight = document.documentElement.clientHeight;
18           var container = document.getElementById(\'container\');
19           container.style.width = clientWidth + \'px\';
20           container.style.height = clientHeight + \'px\';
21 
22           function getLocation(){
23 
24              var options={
25                  enableHighAccuracy:true, //boolean 是否要求高精度的地理信息,默认为false
26                  maximumAge:1000 //应用程序的缓存时间
27              }
28 
29              if(navigator.geolocation){
30                  //浏览器支持geolocation
31                  navigator.geolocation.getCurrentPosition(onSuccess,onError,options);
32                  
33              }else{
34                  //浏览器不支持geolocation
35                  console.log("浏览器不支持!");
36              }
37           }
38 
39           //成功时
40           function onSuccess(position){
41               //返回用户位置
42               //经度
43               var longitude =position.coords.longitude;
44               //纬度
45               var latitude = position.coords.latitude;
46 
47               //腾讯地图的中心地理坐标
48               var center = new qq.maps.LatLng(latitude, longitude);
49 
50               //使用腾讯地图API
51               var map = new qq.maps.Map(document.getElementById("container"), {
52                 //地图的中心地理坐标
53                 center: center,
54                 //初始化地图缩放级别
55                 zoom: 16
56               });
57 
58               //在地图中创建信息提示窗口
59               var infoWin = new qq.maps.InfoWindow({
60                   map: map
61               });
62               //打开信息窗口
63              infoWin.open();
64               //设置信息窗口显示区的内容
65               infoWin.setContent(\'<div style="width:200px;padding:10px;">\'+
66                   \'您在这里<br/>纬度:\'+  latitude+  \'<br/>经度:\'+longitude);
67               //设置信息窗口的位置
68               infoWin.setPosition(center);
69           }
70 
71 
72           //失败时
73           function onError(error){
74              switch(error.code){
75                  case error.PERMISSION_DENIED:
76                  alert("用户拒绝对获取地理位置的请求");
77                  break;
78 
79                  case error.POSITION_UNAVAILABLE:
80                  alert("位置信息是不可用的");
81                  break;
82 
83                  case error.TIMEOUT:
84                  alert("请求用户地理位置超时");
85                  break;
86 
87                  case error.UNKNOWN_ERROR:
88                   alert("未知错误");
89                  break;
90              }
91 
92           }
93 
94           window.onload=getLocation;
95    </script>
96 </body>
97 </html>

DEMO演示

 

 

注意事项:

   此代码在PC端运行,会得不到数据,因为获取位置信息,以及监控位置的变化这些操作都属于敏感性操作,所以browsers在执行都会非常谨慎。它需要你在安全的环境并且获取用户的同意才会执行。

   在移动端,会提示是否允许地理位置授权,用户同意后,才会继续获取数据,进行下面的操作。

 

   还有一点需要注意:

   用HTML5 Geolocation API (地理位置应用程序接口)获得的经纬度参数,传入到腾讯地图,并显示出来后,会发现会有一定的偏移,这是因为我国把美国卫星的GPS的地球坐标,进行偏移的算法,计算后,得出了一个火星坐标。为了让火星坐标能正确的显示,又给每部导航软件加入了这个算法,可以在大家的地图上还原位置;而自己写的程序里没有加入此算法,所以出现了偏移问题,而这个加偏并不是线性的加偏,所以各地的偏移情况都会有所不同。

 

以上是关于基于浏览器的HTML5地理定位的主要内容,如果未能解决你的问题,请参考以下文章

如何使用HTML5地理位置定位功能

前端HTML5 地理位置定位(HTML5 Geolocation)原理及应用

Geolocation 地理定位

Geolocation地理定位

哪些网络浏览器支持通过 HTML5 进行地理定位?

HTML5调用百度地图API进行地理定位实例