基于浏览器的HTML5地理定位

时间 2019-12-09

原文原文链接

地理位置（Geolocation）是 HTML5 的重要特性之一，提供了肯定用户位置的功能，借助这个特性可以开发基于位置信息的应用。今天这篇文章向你们介绍一下 HTML5 地理位置定位的基本原理和一个基于浏览器的HTML5地理定位的小demo，获取浏览器经纬度，并用腾讯地图（你们能够选择本身喜欢的地图）显示出来，实现的最终效果以下图所示：javascript

一、检测浏览器是否支持：css

if (navigator.geolocation) {html

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

}java

else {git

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

}chrome

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

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 告诉浏览器咱们愿意接受缓存过的位置,只要它不早于指定的毫秒数数值

3、代码实现

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的地球坐标，进行偏移的算法，计算后，得出了一个火星坐标。为了让火星坐标能正确的显示，又给每部导航软件加入了这个算法，能够在你们的地图上还原位置；而本身写的程序里没有加入此算法，因此出现了偏移问题，而这个加偏并非线性的加偏，因此各地的偏移状况都会有所不一样。