通过window.navigator对象获取地理位置信息并在百度地图上显示

2022-07-13 09:01:19

通过window.navigator对象获取地理位置信息

Geolocation API：用户可共享地理位置，并在Web应用的协助下享用位置感知服务（location-aware services）

window.navigator下的geolocation 对象的 getCurrentPosition 方法可以获取当前位置。getCurrentPosition 方法将发起对位置信息的异步请求并将立即返回。如果该请求成功完成，则调用用来实现位置数据接收的成功回调。

下面演示如何调用 getCurrentPosition 并使用回调处理传入位置数据。其中successCallback是回调函数

var nav = null; 

function requestPosition() {
  if (nav == null) {
      nav = window.navigator;
  }
  if (nav != null) {
      var geoloc = nav.geolocation;
      if (geoloc != null) {
          geoloc.getCurrentPosition(successCallback);
      }
      else {
          alert("geolocation not supported");
      }
  }
  else {
      alert("Navigator not found");
  }
}

function successCallback(position)
{

</pre><pre name="code" class="javascript">}

回调函数successCallback接受一个对象参数position，表示当前的地理位置，它有如下属性：

latitude——纬度

longitude——经度

accuracy——精确度，单位米

altitude——高度，单位米

altitudeAccuracy——高度的精确地，单位米

heading—运动的方向，相对于正北方向的角度

speed——运动的速度（假设你在地平线上运动），单位米/秒

回调函数handleLocationError接受错误对象，error.code是如下错误号。

UNKNOWN_ERROR (error code 0) —— 错误不在如下三种之内，你可以使用error.message获取错误详细信息。

PERMISSION_DENIED (error code 1)—— 用户选择不共享地理位置

POSITION_UNAVAILABLE (error code 2) ——无法获取当前位置

TIMEOUT (error code 3) ——在指定时间无法获取位置会触发此错误。

第三个参数options是可选参数，属性如下：

enableHighAccuracy——指示浏览器获取高精度的位置，默认为false。当开启后，可能没有任何影响，也可能使浏览器花费更长的时间获取更精确的位置数据。

timeout——指定获取地理位置的超时时间，默认不限时。单位为毫秒。

maximumAge——最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。默认为0，表示浏览器需要立刻重新计算位置。

下面演示如何调用百度API根据地理位置信息显示当前位置

先接入百度API 然后回调函数这样写:

function successCallback(position)
{
    setText(position.coords.latitude, "latitude");
    setText(position.coords.longitude, "longitude");
    var map = new BMap.Map("container");          // 创建地图实例  
    var point = new BMap.Point(position.coords.longitude, position.coords.latitude);  // 创建点坐标  
    map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别 
    map.addControl(new BMap.NavigationControl());   // 添加平移缩放控件 
    map.addControl(new BMap.ScaleControl());    // 添加比例尺控件
    map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件

     var marker = new BMap.Marker(point);        // 创建标注    
     map.addOverlay(marker);                     // 将标注添加到地图中
}

接着问题来了，发现定位跟实际位置有偏差。一查，原来是这样的:

百度坐标为何有偏移？

国际经纬度坐标标准为WGS-84,国内必须至少使用国测局制定的GCJ-02,对地理位置进行首次加密。百度坐标在此基础上，进行了BD-09二次加密措施,更加保护了个人隐私。百度对外接口的坐标系并不是GPS采集的真实经纬度，需要通过坐标转换接口进行转换。

如何从其他体系的坐标迁移到百度坐标？

开发者可以使用坐标转换接口进行转换。JavaScript API 、Android SDK、iOS SDK的开发用户可直接调用相应方法进行转换。

在用转换借口前一定一定要记得引用它转换用的JS文件

转换后的回调函数:

function successCallback(position)
{
    setText(position.coords.latitude, "latitude");
    setText(position.coords.longitude, "longitude");
    var map = new BMap.Map("container");          // 创建地图实例  
    var point = new BMap.Point(position.coords.longitude, position.coords.latitude);  // 创建点坐标  
    map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别 
    map.addControl(new BMap.NavigationControl());   // 添加平移缩放控件 
    map.addControl(new BMap.ScaleControl());    // 添加比例尺控件
    map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件

    translateCallback = function(Point) {
        var marker = new BMap.Marker(Point); // 创建标注  
        map.addOverlay(marker); // 将标注添加到地图中
        map.setCenter(point);
    }
    BMap.Convertor.translate(point,0,translateCallback);     //真实经纬度转成百度坐标
}

通过window.navigator对象获取地理位置信息并在百度地图上显示

码农公寓