HTML 5-使用HTML5进行地理位置定位,误差在+-500m.如何精准?

HTML 5-使用HTML5进行地理位置定位,误差在+-500m.如何精准?

泛泛之交 发布于 2017-05-31 字数 90 浏览 1216 回复 5

使用HTML5进行地理位置定位,
误差在+-500m左右.
使用移动设备也一样如何精准?

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

泛泛之交 2017-11-02 5 楼

答案是无法精准,测量值波动可以达到50-80%,请看http://whatismyipaddress.com/geolocation-accuracy

浮生未歇 2017-09-04 4 楼

不可能没有偏差。

泛泛之交 2017-07-28 3 楼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Geolocation 对象,Geolocation 与 Google Map 交互 ------ JS
Mix</title>
</head>
<body>
<input type="button" id="getPos" value="获取我的位置">
<div id="info" class="">
您所在的位置: 经度
<span class="tip">unknown</span>,纬度
<span class="tip">unknown</span>
</div>

<script type="text/javascript">
var t = 0;
var dom = {
btn : document.getElementById('getPos'),
info : document.getElementById('info')
};

dom.btn.onclick = function(){
if (navigator.geolocation) {
dom.info.innerHTML = "请等待查询结果返回";
dom.info.className = "warn";
navigator.geolocation.getCurrentPosition(getPositionSuccess,getPositionError,{timeout:5000});
}else {
dom.info.innerHTML = "抱歉,您所使用的浏览器不支持 Geolocation 接口";
dom.info.className = "warn";
}
}

function getPositionSuccess(position){
var lat = position.coords.latitude;
var lng = position.coords.longitude;
dom.info.innerHTML = "您所在的位置: 经度" + lat + ",纬度" + lng;

if(typeof position.address === "undefined"){
dom.info.innerHTML += "<br /><span class='tip'>您的浏览器目前仅提供坐标查询,使用 Firefox 3.5+ 可获得更多信息</span>";
}else{
dom.info.innerHTML += "<br /><span class='tip'>" + position.address.country + " , " + position.address.region + " , " + position.address.city+"</span>";
}
}

function getPositionError(error){
switch(error.code){
case error.TIMEOUT :
dom.info.innerHTML = "连接超时,请重试";
break;
case error.PERMISSION_DENIED :
dom.info.innerHTML = "您拒绝了使用位置共享服务,查询已取消";
break;
case error.POSITION_UNAVAILABLE :
dom.info.innerHTML = "亲爱的火星网友,非常抱歉<br />我们暂时无法为您所在的星球提供位置服务";
break;
}
}

</script>
</body>
</html>

参考文献:基于浏览器的定位服务

灵芸 2017-07-07 2 楼

有偏移量,每个区域偏移量还不同

想挽留 2017-07-07 1 楼

我使用这个demo向左偏差。用移动设备访问。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=620" />
<title>HTML5 Demo: geolocation</title>
<style>
body {
font: normal 16px/20px Helvetica, sans-serif;
background: rgb(237, 237, 236);
margin: 0;
margin-top: 40px;
padding: 0;
}
section, header, footer {
display: block;
}
#wrapper {
width: 600px;
margin: 0 auto;
background: #fff url(images/shade.jpg) repeat-x center bottom;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-top: 1px solid #fff;
padding-bottom: 76px;
}
h1 {
padding-top: 10px;
}
h2 {
font-size: 100%;
font-style: italic;
}
header, article > *, footer > * {
margin: 20px;
}
footer > * {
margin: 20px;
color: #999;
}
#status {
padding: 5px;
color: #fff;
background: #ccc;
}
#status.fail {
background: #c00;
}
#status.success {
background: #0c0;
}
</style>
<script src="h5utils.js"></script><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<section id="wrapper">
<header>
<h1>Geolocation</h1>
</header>
<article>
<p>Finding your location: <span id="status">checking…</span></p>
</article>
<footer><a>HTML5 demo</a></footer>
</section>
<script>
function success(position) {
var s = document.querySelector('#status');
if (s.className == 'success') {
// not sure why we're hitting this twice in FF, I think it's to do with a cached result coming back
return; }
s.innerHTML = "found you!";
s.className = 'success';
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcanvas';
mapcanvas.style.height = '400px';
mapcanvas.style.width = '100%';
document.querySelector('article').appendChild(mapcanvas);
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {
zoom: 15, center: latlng,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
var marker = new google.maps.Marker({ position: latlng, map: map, title:"You are here!" });
}
function error(msg) {
var s = document.querySelector('#status');
s.innerHTML = typeof msg == 'string' ? msg : "failed";
s.className = 'fail';
// console.log(arguments);
} if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
error('not supported');
}
</script>
</body>
</html>