有关html5+调用百度地图接口导致坐标有偏差问题

来源:互联网 发布:mac视频播放默认 编辑:程序博客网 时间:2024/05/22 02:09




//html5自带了获得当前坐标的方法

function getLocation(){

if(navigator.geolocation){

//获得当前定位 enableHighAccuracy:true设置高精度

navigator.geolocation.getCurrentPosition(showPosition,showError,{enableHighAccuracy:true,timeout:10000});
}else{
alert("浏览器不支持地理定位");
}

}

//

function showPosition(position){

//html5中设置地图高度和宽度

var map_h=parseInt(4*deviceWidth/7.2);
var map_w=deviceWidth;
//alert(typeof deviceWidth);

var addre=document.getElementById("addre");

//这里是获得lat纬度 lag精度

var lat = position.coords.latitude;
var lag = position.coords.longitude;
//百度
//由于gps定位获得的国际上使用的坐标,在国内有偏移 所以需要转换成国内使用的坐标 
var gpsPoint = new BMap.Point(lag,lat);
setTimeout(function(){
       BMap.Convertor.translate(gpsPoint,0,translateCallback);
   }, 1000);

mui.toast('正在定位',{duration:100,type:'div'});
translateCallback = function (point){

latlon = point.lat+","+point.lng;

//这里需要自己获得百度地图开发密钥

var url = "http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback=renderReverse&location="+latlon+"&output=json&pois=0";
mui.ajax(url,{
data:{},
type:'get',
dataType:'jsonp',
success:function(data){
//做字符串切割
var arr = new Array();
arr= data.split("(");
var res = arr[1].split(")");
var obj = eval('('+res[0]+')');

if(obj.status==0){

//获得当前具体坐标   这个比如某某街道多少号  当然这里可以根据obj的内容自己截取所需要的值 

loca=obj.result.formatted_address+" "+obj.result.sematic_description;
addre.innerHTML=obj.result.formatted_address+" "+obj.result.sematic_description;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center=" 
   +latlon+"&zoom=14&size="+map_w+"x"+map_h+"&sensor=false"; 
  /* mui.toast('定位成功',{duration:3000,type:'div'});*/
  // 使用百度地图API创建地图实例  pic是我在html中定义id为pic的div
   var map = new BMap.Map("pic");
   // 创建一个坐标
   // 地图初始化,设置中心点坐标和地图级别 
   map.centerAndZoom(point,17);
   
    // 设置标注的图标,可自己定义图标
       var icon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {  
           offset: new BMap.Size(10, 25),              // 定位图标尺寸  
           imageOffset: new BMap.Size(0, 0 - 11 * 25)  // 设置图片偏移  
       }); 

       // 设置标注的经纬度
       var marker = new BMap.Marker(point,{icon:icon});

       // 把标注添加到地图上
       map.addOverlay(marker);

       // 设置点击事件
       marker.addEventListener("click", function(){
           alert("经度:" + lag + ", 纬度:" + lat);
       });
   
   
}
},
error:function(XMLHttpRequest, textStatus, errorThrown){
addre.innerHTML=latlon+"地址位置获取失败"+errorThrown;
}
});
      }
}
function showError(err){
alert("定位失败");

}

这样就完成了一个html5基本的定位功能当然了,这个地图是能够进行移动和缩放的。现在在手机上面进行测试偏差大约是50米左右

阅读全文
0 0
原创粉丝点击