html5地理定位基于啥原理

Posted 2023-05-03

tags:

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

参考技术A html5地理定位的实现原理：
1. 实现基于浏览器（无需后端支持）获取用户的地理位置技术
2. 精确定位用户的地理位置( 精度最高达10m之内，依赖设备 )
3. 持续追踪用户的地理位置
4. 与 Google Map、或者 Baidu Map 交互呈现位置信息。本回答被提问者采纳

基于浏览器的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 Geolocation）原理及应用

Geolocation 地理定位

Geolocation地理定位

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

HTML5——拖放地理定位视频音频新的input类型

HTML5 Geolocation（地理定位）简介