html5中获取地理位置信息
2016-08-13 11:30
465 查看
HTML5提供了地理位置定位功能（Geolocation API），能确定用户位置，我们可以借助HTML5的该特性开发基于地理位置信息的应用。本文结合实例给大家分享如何使用HTML5，借助百度、谷歌地图等接口来获取用户准确的地理位置信息。
定位功能（Geolocation）是HTML5的新特性，因此只有在支持HTML5的现代浏览器上运行，特别是手持设备如iphone，地理定位更加精确。首先我们要检测用户设备浏览器是否支持地理定位，如果支持则获取地理信息。注意这个特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是 不可用的，所以我们在访问该应用时会提示是否允许地理定位，我们当然选择允许即可，电脑端操作也是如此。
这些位置信息是从何而来的呢？ip地址，GPS全球定位，wifi无线网络，基站，所以如果通过ip去定位的话，可能这个位置信息就不是那么准确，因为可能获取的位置信息是ip提供商的位置。所以，现在移动端手机一般获取到的位置信息都是基于GPS全球定位系统，也就是卫星定位，这个准确度很高。大家地理应该都学过，我们获取某处的位置一般是根据经度（南北极的连接线）和纬度（东西连接的线）的交叉线来获取的。
接下来我们一起来了解获取地理位置信息的API，这个对象是:
这个方法里面有三个参数，其中第一个请求参数是请求成功的回调函数，这个成功的回调函数里面可以获得很多的位置属性，如下：
»经度:
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
具体的举个例子如下:
<span style="font-size:18px;"><!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>
</span>
接下来我们再看一下多次定位请求的方法:
<span style="font-size:18px;"> watchPosition(像setInterval)
</span>
»移动设备有用，位置改变才会触发
»配置参数：frequency
更新的频率
关闭更新请求 :
我们直接来看一个例子:
<span style="font-size:18px;"><!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>
</span>最后，我们来看一下连接百度地图接口，做一个百度地图应用:
<span style="font-size:18px;"><!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>
</span>
定位功能（Geolocation）是HTML5的新特性，因此只有在支持HTML5的现代浏览器上运行，特别是手持设备如iphone，地理定位更加精确。首先我们要检测用户设备浏览器是否支持地理定位，如果支持则获取地理信息。注意这个特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是 不可用的，所以我们在访问该应用时会提示是否允许地理定位，我们当然选择允许即可，电脑端操作也是如此。
这些位置信息是从何而来的呢？ip地址，GPS全球定位，wifi无线网络，基站，所以如果通过ip去定位的话，可能这个位置信息就不是那么准确，因为可能获取的位置信息是ip提供商的位置。所以，现在移动端手机一般获取到的位置信息都是基于GPS全球定位系统，也就是卫星定位，这个准确度很高。大家地理应该都学过，我们获取某处的位置一般是根据经度（南北极的连接线）和纬度（东西连接的线）的交叉线来获取的。
接下来我们一起来了解获取地理位置信息的API，这个对象是:
<span style="font-size:18px;">navigator.geolocation</span>这个对象底下有单次定位请求的方法和多次定位请求的方法。我们先看一下单次定位请求的方法：
<span style="font-size:18px;">getCurrentPosition(请求成功,请求失败,数据手机方式)</span>
这个方法里面有三个参数，其中第一个请求参数是请求成功的回调函数，这个成功的回调函数里面可以获得很多的位置属性，如下：
»经度:
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
具体的举个例子如下:
<span style="font-size:18px;"><!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>
</span>
接下来我们再看一下多次定位请求的方法:
<span style="font-size:18px;"> watchPosition(像setInterval)
</span>
»移动设备有用，位置改变才会触发
»配置参数：frequency
更新的频率
关闭更新请求 :
<span style="font-size:18px;"> clearWatch(像clearInterval)</span>
我们直接来看一个例子:
<span style="font-size:18px;"><!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>
</span>最后，我们来看一下连接百度地图接口，做一个百度地图应用:
<span style="font-size:18px;"><!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>
</span>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5获取地理位置定位信息
- html5获取地理位置信息
- AngularJS进阶(二十)HTML5实现获取地理位置信息并定位功能
- HTML5获取地理位置信息并在Google Maps上显示
- HTML5实现获取地理位置信息并定位功能
- HTML5实现获取地理位置信息并定位功能
- 通过html5获取地理位置信息
- HTML5获取地理位置信息
- Html5支持获取用户地理位置信息
- Html5 Geolocation获取地理位置信息(转)
- html5获取地理位置信息API
- HTML5之地理信息应用 获取自己的位置
- Html5 Geolocation获取地理位置信息
- Html5 Geolocation获取地理位置信息
- html5获取地理位置信息4种方式详解
- HTML5获取地理位置定位信息
- Html5 Geolocation获取地理位置信息
- jQuery Mobile + HTML5 获取地理位置信息
- HTML5获取地理位置定位信息