html5获取用户当前位置

Posted 2020-07-07 随记

支持地理定位的浏览器有IE9+、Firefox 3.5+ 、Opera 10.6+ 、Safari 5+ 、Chrome、ios 版Safari、android版WebKit。

 1 navigator.geolocation.getCurrentPosition(function(position){//成功执行的函数
 2     document.write("当前地理位置纬度：",position.coords.latitude,"；经度：",position.coords.longitude,"；精度系数：",position.coords.accuracy,"米。<br>"); 
 3     document.write("海拔高度：",position.coords.altitude,"；精度系数：",position.coords.altitudeAccuracy,"；指南针方向（0°表示正北）：",position.coords.heading,"；移动数度：",position.coords.speed);
 4 },  function(error){//失败执行的函数 code 属性表示用户拒绝共享（1）、位置无效（2）或者超时（3）
 5     document.write("错误类型: " + error.code+"<br>"); 
 6     document.write("错误信息: " + error.message); 
 7 }, { 
 8     enableHighAccuracy: false, //enableHighAccuracy 是一个布尔值，表示必须尽可能使用最准确的位置信息（建议设置为false，true需要更长的时间，在移动设备上还会导致消耗更多电量）
 9     timeout: 5000, //timeout是以毫秒数表示的等待位置信息的最长时间（超时时间，如果不需要频繁的访问用户的位置，建议设置为Infinity）
10     maximumAge: 25000 //maximumAge表示上一次取得的坐标信息的有效时间，以毫秒表示，如果时间到则重新取得新坐标信息
11 }); 

注：测试过根据api调用百度地图显示当前位置，测试结果与原生应用（安卓，iOS应用）获取的位置偏差较大，不适合做导航定位应用。

如果你希望跟踪用户的位置，那么可以使用另一个方法watchPosition() 。这个方法接收的参数与getCurrentPosition() 方法完全相同。实际上，watchPosition() 与定时调用getCurrentPosition() 的效果相同。在第一次调用 watchPosition()方法后，会取得当前位置，执行成功回调或者错误回调。然后，watchPosition()就地等待系统发出位置已改变的信号（它不会自己轮询位置）。 调用watchPosition() 会返回一个数值标识符，用于跟踪监控的操作。基于这个返回值可以取消监控操作，只要将其传递给clearWatch()方法即可（与使用setTimeout()和clearTimeout()类似）。例如：

1 var watchId = navigator.geolocation.watchPosition(function(position){
2     drawMapCenteredAt(position.coords.latitude, positions.coords.longitude);
3 }, function(error){
4     console.log("Error code: " + error.code);
5     console.log("Error message: " + error.message);
6 });
7  
8 clearWatch(watchId); 

以上例子调用了watchPosition() 方法，将返回的标识符保存在了watchId 中。然后，又将watchId传给了clearWatch()，取消了监控操作。