javascript 移动端获取用户当前位置经纬度信息

   最近做一个项目需要前端做定位功能,获取用户当前位置的经纬度信息,尝试了很多方法,现在备份一下:

一、HTML5 geolocation的属性

if(navigator.geolocation){
  navigator.geolocation.getCurrentPosition(onSuccess , onError);
}else{
  alert("您的浏览器不支持使用HTML 5来获取地理位置服务");
}
//定位数据获取成功响应
function  onSuccess(position){
      alert('纬度: '          + position.coords.latitude          + '\n' +
      '经度: '         + position.coords.longitude         + '\n' +
      '海拔: '          + position.coords.altitude          + '\n' +
      '水平精度: '          + position.coords.accuracy          + '\n' +
      '垂直精度: ' + position.coords.altitudeAccura)
}
//定位数据获取失败响应
function onError(error) {
  switch(error.code)
  {
    case error.PERMISSION_DENIED:
    alert("您拒绝对获取地理位置的请求");
    break;
    case error.POSITION_UNAVAILABLE:
    alert("位置信息是不可用的");
    break;
    case error.TIMEOUT:
    alert("请求您的地理位置超时");
    break;
    case error.UNKNOWN_ERROR:
    alert("未知错误");
    break;
  }
}

二、百度地图api定位

(1)HTML

因为是通过react,所以在html中需要定义一个全局的BMap对象

    
    
    

(2)jsx

    let BMap = window.BMap
    let geolocation = new BMap.Geolocation()
    
    geolocation.enableSDKLocation(); //允许SDK辅助
    geolocation.getCurrentPosition(function (r) {
      if(this.getStatus() == 0){
        console.log(r)
      }
    })

(3)成功后返回结果

javascript 移动端获取用户当前位置经纬度信息_第1张图片

三 、腾讯地图api定位

(1)HTML

(2)javascript

window.addEventListener('message', function(event) {
    // 接收位置信息
    var loc = event.data;
    console.log('location', loc);
}, false)       ;
setTimeout(function() {
    if (!_this.loc) {
       console.log('定位超时')
    }
}, 6000) // 6s为推荐值,业务调用方可根据自己的需求设置改时间,不建议太短

(3)成功后返回结果

javascript 移动端获取用户当前位置经纬度信息_第2张图片

百度地图api定位有偏差,腾讯地图定位相对比较准

你可能感兴趣的:(Javascript)