有关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
- 有关html5+调用百度地图接口导致坐标有偏差问题
- HTML5 调用 GPSAPI 获取当前位置的坐标 显示在地图上(有包括百度地图与谷歌地图)
- java调用百度地图api接口---转换非百度坐标和根据百度坐标转换地理位置
- 百度地图接口调用
- 调用百度地图,选取坐标接口,并转换成GPS坐标
- Android调用百度地图可能导致出错的问题
- 百度地图坐标转换新接口
- js 获取详细地理位置 利用百度地图偏差的问题
- Winform调用百度地图接口
- php 调用百度地图接口
- 【百度地图API】如何在地图上添加标注?——另有:坐标拾取工具+打车费用接口介绍
- iOS关于百度地图坐标转换问题
- Android 百度地图开发 坐标误差问题
- 百度地图的坐标初始化问题
- 百度地图 坐标转换 顺序问题
- HTML5 调用百度地图API地理定位
- html5在网页中调用百度地图
- html5调用百度地图APP-WAP端
- ubuntu 问题处理 “could not apply the stored configuration for monitors”
- UVA 120 Stacks of Flapjacks
- OWIN详解
- 颜色分类-LintCode
- Java数据结构与算法
- 有关html5+调用百度地图接口导致坐标有偏差问题
- HTTP错误状态码
- MySQL 5.7.9版本sql_mode=only_full_group_by问题
- 【dp】Making the Grade POJ
- DPDK-网络收发包平台优化及配置优化
- JS刷新一次页面,第二次显示样式
- 对数据库设计的三大范式的理解
- 【HDU 6033 】Add More Zero 【思维】
- JS中script标签defer和async属性