基于浏览器的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地理定位的主要内容，如果未能解决你的问题，请参考以下文章