HTML5获取用户地理位置信息 经纬度等信息
我们在浏览一些团购网站或者本地生活网站，经常会发现手机端弹出一个确认窗，让你点击共享位置信息，这个就是通过HTML5来实现的，点击后，网站就能获取到你手机的GPS定位或者基站定位信息。
HTML5提供了地理位置定位功能（Geolocation API），能确定用户位置，我们可以借助HTML5的该特性开发基于地理位置信息的应用。
这里提供实例给大家分享如何使用HTML5，并提供实例来借助百度、谷歌地图等接口来获取用户准确的地理位置信息。
定位功能（Geolocation）是HTML5的新特性，因此只有在支持HTML5的现代浏览器上运行，特别是手持设备如iphone，地理定位更加精确。
首先我们要检测用户设备浏览器是否支持地理定位，如果支持则获取地理信息。这个特性可能侵犯用户的隐私，因此在客户端都会先弹出一个提示，需要用户点同意后才能获取到信息，所以我们在访问该应用时会提示是否允许地理定位，我们当然选择允许即可，电脑端操作也是如此。
这些位置信息是从何而来的呢？ip地址，GPS全球定位，wifi无线网络，基站。如果通过ip去定位的话，可能这个位置信息就不是那么准确，因为国内大部分都是用户IP都是一直变动，IP只能得到一个较大范围的区域，比如精确到县级，再往下精确度就很难达成。现在移动端手机一般获取到的位置信息都是基于GPS或者基站定位。基站定位可以精确到街道，GPS则能精确到米级。
接下来我们一起来了解获取地理位置信息的API，这个对象是:
navigator.geolocation
这个对象底下有单次定位请求的方法和多次定位请求的方法。我们先看一下单次定位请求的方法：
getCurrentPosition(请求成功,请求失败,数据手机方式)
这个方法里面有三个参数，其中第一个请求参数是请求成功的回调函数，这个成功的回调函数里面可以获得很多的位置属性，如下：
?经度: coords.longitude ?纬度: coords.latitude ?海拔: coords.altitude ?海拔准确度: coords.altitudeAcuracy ?行进方向: coords.heading ?地面速度: coords.speed ?时间戳: new Date(position.timestamp)
第二个请求参数是请求失败的回调参数，请求失败有很多因素，回调参数里有个code属性就分别表示失败的原因：
?失败编号 ：code ?0 : 不包括其他错误编号中的错误 ?1 : 用户拒绝浏览器获取位置信息 ?2 : 尝试获取用户信息，但失败了 ?3 : 设置了timeout值，获取位置超时了
第三个参数表示的是数据的一个收集，这是JSON格式的，分别有以下形式：
?enableHighAcuracy : 更精确的查找，默认false ?timeout : 获取位置允许最长时间，默认infinity ?maximumAge : 位置可以缓存的最大时间，默认0
下面来个实际案例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div{width:400px;height:400px;border:1px solid black;}
</style>
<script>
window.onload = function(){
var oInput = document.getElementById('in1');
var oDiv = document.getElementById('box1');
oInput.onclick = function(){
window.navigator.geolocation.getCurrentPosition(function(position){
var longitude = position.coords.longitude;
var latitude = position.coords.latitude;
var altitude = position.coords.altitude;
var altitudeAcuracy = position.coords.altitudeAcuracy;
var heading = position.coords.heading;
var speed = position.coords.speed;
var data = new Date(position.timestamp);
oDiv.innerHTML = '经度:'+longitude+'/n纬度:'+latitude+'/n海拔'+altitude+"altitudeAcuracy"+altitudeAcuracy+"/n行走方向"+heading+'/n地面速度'+speed+'/n时间戳'+data;
},function(err){
alert(err.code);
},{
timeoenableHighAcuracy:false,
timeout : 5000,
maximumAge :5
});
};
};
</script>
</head>
<body>
<input type='button' value='获取地理位置信息' id='in1' />
<div id='box1'> </div>
</body>
</html>接下来我们再看一下多次定位请求的方法:
watchPosition(像setInterval)
?移动设备有用，位置改变才会触发
?配置参数：frequency 更新的频率
关闭更新请求 :
clearWatch(像clearInterval)
再来个实例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
//LBS : 基于地图信息的应用
window.onload = function(){
var oInput = document.getElementById('input1');
var oT = document.getElementById('t1');
var timer = null;
oInput.onclick = function(){
timer = navigator.geolocation.watchPosition(function(position){
oT.value += '经度:' + position.coords.longitude+'\n';
oT.value += '纬度 :' + position.coords.latitude+'\n';
oT.value += '准确度 :' + position.coords.accuracy+'\n';
oT.value += '海拔 :' + position.coords.altitude+'\n';
oT.value += '海拔准确度 :' + position.coords.altitudeAcuracy+'\n';
oT.value += '行进方向 :' + position.coords.heading+'\n';
oT.value += '地面速度 :' + position.coords.speed+'\n';
oT.value += '时间戳:' + new Date(position.timestamp)+'\n';
},function(err){
//err.code // 失败所对应的编号
alert( err.code );
navigator.geolocation.clearWatch(timer);
},{
enableHighAcuracy : true,
timeout : 5000,
maximumAge : 5000,
frequency : 1000
});
};
};
</script>
</head>
<body>
<input type="button" value="请求" id="input1" /><br />
<textarea id="t1" style="width:400px; height:400px; border:1px #000 solid;">
</textarea>
</body>
</html>最后，我们来看一下连接百度地图接口，做一个百度地图应用的实例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1{ width:400px; height:400px; border:1px #000 solid;}
</style>
<script src="http://api.map.baidu.com/api?v=1.3"></script>
<script>
window.onload = function(){
var oInput = document.getElementById('input1');
oInput.onclick = function(){
navigator.geolocation.getCurrentPosition(function(position){
var y = position.coords.longitude;
var x = position.coords.latitude;
var map = new BMap.Map("div1");
var pt = new BMap.Point(y, x);
map.centerAndZoom(pt, 14);
map.enableScrollWheelZoom();
var myIcon = new BMap.Icon("miaov.png", new BMap.Size(30,30));
var marker2 = new BMap.Marker(pt,{icon:myIcon}); // 创建标注
map.addOverlay(marker2);
var opts = {
width : 200, // 信息窗口宽度
height: 60, // 信息窗口高度
title : "北京航空航天大学" // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow("软件学院", opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow,pt); //开启信息窗口
});
};
};
</script>
</head>
<body>
<input type="button" value="请求" id="input1" />
<div id="div1"></div>
</body>
</html>
顶(3)
踩(0)
上一篇：没有了
- 最新评论