在前面的《小强的html5移动开发之路（2）——html5的新特性》中介绍了关于html5的地理定位功能，这一篇我们来详细了解一下怎么使用该功能。
html5 geolocation api用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的，在使用该功能的时候浏览器会弹出提醒框。
一、地理定位的几种方式
ip地址、gps、wifi、gsm/cdma
二、地理位置获取流程
1、用户打开需要获取地理位置的web应用。
2、应用向浏览器请求地理位置，浏览器弹出询问，询问用户是否共享地理位置。
3、假设用户允许，浏览器从设别查询相关信息。
4、浏览器将相关信息发送到一个信任的位置服务器，服务器返回具体的地理位置。
三、浏览器的支持
ie9.0+、ff3.5+、safari5.0+、chrome5.0+、opera10.6+ 支持地理定位。
注释：对于拥有 gps 的设备，比如 iphone（iphone3.0+、android2.0+），地理定位更加精确。
四、html5中地理位置定位的方法
geolocationapi存在于navigator对象中，只包含3个方法：
1、getcurrentposition //当前位置
2、watchposition //监视位置
3、clearwatch //清除监视
五、地理定位方法getcurrentposition()
<!doctype html>
<html>
<body>
<p id="demo">点击这个按钮，获得您的坐标：</p>
<button onclick="getlocation()">试一下</button>
<script>
var x=document.getelementbyid("demo");
function getlocation(){
if (navigator.geolocation){ //判断是否支持地理定位
//如果支持，则运行getcurrentposition()方法。
navigator.geolocation.getcurrentposition(showposition);
}else{
//如果不支持，则向用户显示一段消息
x.innerhtml="geolocation is not supported by this browser.";
}
}
//获取经纬度并显示
function showposition(position){
x.innerhtml="latitude: " + position.coords.latitude +
"<br />longitude: " + position.coords.longitude;
}
</script>
</body>
</html>
getcurrentposition(success,error,option)方法最多可以有三个参数：
getcurrentposition()方法第一个参数回调一个showposition()函数并将位置信息传递给该函数，从该函数中获取位置信息并显示，
getcurrentpostion()方法第二个参数用于处理错误信息，它是获取位置信息失败的回调函数
getcurrentpostion()方法第三个参数是配置项，该参数是一个对象，影响了获取位置的细节。
<!doctype html>
<html>
<body>
<p id="demo">点击这个按钮，获得您的坐标：</p>
<button onclick="getlocation()">试一下</button>
<script>
var x=document.getelementbyid("demo");
function getlocation(){
if (navigator.geolocation){ //判断是否支持地理定位
//如果支持，则运行getcurrentposition()方法。
navigator.geolocation.getcurrentposition(showposition,showerror);
}else{
//如果不支持，则向用户显示一段消息
x.innerhtml="geolocation is not supported by this browser.";
}
}
//获取经纬度并显示
function showposition(position){
x.innerhtml="latitude: " + position.coords.latitude +
"<br />longitude: " + position.coords.longitude;
}
//错误处理函数
function showerror(error){
switch(error.code) //错误码
{
case error.permission_denied: //用户拒绝
x.innerhtml="user denied the request for geolocation."
break;
case error.position_unavailable: //无法提供定位服务
x.innerhtml="location information is unavailable."
break;
case error.timeout: //连接超时
x.innerhtml="the request to get user location timed out."
break;
case error.unknown_error: //未知错误
x.innerhtml="an unknown error occurred."
break;
}
}
</script>
</body>
</html>
六、在google地图中显示结果
<!doctype html>
<html>
<body>
<p id="demo">点击这个按钮，获得您的位置：</p>
<button onclick="getlocation()">试一下</button>
<div id="mapholder"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var x=document.getelementbyid("demo");
function getlocation(){
if (navigator.geolocation){
navigator.geolocation.getcurrentposition(showposition,showerror);
}else{
x.innerhtml="geolocation is not supported by this browser.";
}
}
function showposition(position){
lat=position.coords.latitude;
lon=position.coords.longitude;
latlon=new google.maps.latlng(lat, lon)
mapholder=document.getelementbyid('mapholder')
mapholder.style.height='250px';
mapholder.style.width='500px';
var myoptions={
center:latlon,zoom:14,
maptypeid:google.maps.maptypeid.roadmap,
maptypecontrol:false,
navigationcontroloptions:{style:google.maps.navigationcontrolstyle.small}
};
var map=new google.maps.map(document.getelementbyid("mapholder"),myoptions);
var marker=new google.maps.marker({position:latlon,map:map,title:"you are here!"});
}
function showerror(error){
switch(error.code){
case error.permission_denied:
x.innerhtml="user denied the request for geolocation."
break;
case error.position_unavailable:
x.innerhtml="location information is unavailable."
break;
case error.timeout:
x.innerhtml="the request to get user location timed out."
break;
case error.unknown_error:
x.innerhtml="an unknown error occurred."
break;
}
}
</script>
</body>
</html>
七、在百度地图中显示结果
1、去百度开发者获取地图显示密钥
http://developer.baidu.com/map/jshome.htm
<!doctype html>
<html>
<body>
<p id="demo">点击这个按钮，获得您的位置：</p>
<button onclick="getlocation()">试一下</button>
<div id="mapholder" style="width:600px;height:500px;"></div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你自己的密钥"></script>
<script>
var x=document.getelementbyid("demo");
function getlocation(){
if (navigator.geolocation){
navigator.geolocation.getcurrentposition(showposition,showerror);
}else{
x.innerhtml="geolocation is not supported by this browser.";
}
}
function showposition(position){
//alert(position.coords.longitude + " ___ " + position.coords.latitude);
// 百度地图api功能
var map = new bmap.map("mapholder"); // 创建map实例
var point = new bmap.point(position.coords.longitude, position.coords.latitude); // 创建点坐标
map.centerandzoom(point,15); // 初始化地图,设置中心点坐标和地图级别。
map.enablescrollwheelzoom();
}
function showerror(error){
switch(error.code){
case error.permission_denied:
x.innerhtml="user denied the request for geolocation."
break;
case error.position_unavailable:
x.innerhtml="location information is unavailable."
break;
case error.timeout:
x.innerhtml="the request to get user location timed out."
break;
case error.unknown_error:
x.innerhtml="an unknown error occurred."
break;
}
}
</script>
</body>
</html>
注意：如果拷贝上面代码，请将“你自己的密钥”替换为在百度开发者中心申请的密钥
可以看到google map 和百度地图的定位参考不同，所以用ip定位误差很大。
八、getcurrentposition()方法—返回数据
若成功，则 getcurrentposition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性。
属性
描述
coords.latitude 十进制数的纬度
coords.longitude 十进制数的经度
coords.accuracy 位置精度
coords.altitude 海拔，海平面以上以米计
coords.altitudeaccuracy 位置的海拔精度
coords.heading 方向，从正北开始以度计
coords.speed 速度，以米/每秒计
timestamp 响应的日期/时间
还可以获得地理位置（只有firefox支持)
p.address.country 国家
p.address.region 省份
p.address.city 城市
九、监视位置（移动设备中）
watchposition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 gps）。
clearwatch() - 停止 watchposition() 方法
下面的例子展示 watchposition() 方法
watchposition像一个追踪器与clearwatch成对。
watchposition与clearwatch有点像setinterval和clearinterval的工作方式。
varwatchpositionid =navigator.geolocation.watchposition(success_callback,error_callback,options);
navigator.geolocation.clearwatch(watchpositionid );
<!doctype html>
<html>
<body>
<p id="demo">点击这个按钮，获得您的坐标：</p>
<button onclick="getlocation()">试一下</button>
<script>
var x=document.getelementbyid("demo");
function getlocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchposition(showposition);
}
else{x.innerhtml="geolocation is not supported by this browser.";}
}
function showposition(position)
{
x.innerhtml="latitude: " + position.coords.latitude +
"<br />longitude: " + position.coords.longitude;
}
</script>
</body>
</html>
以上就是 小强的html5移动开发之路（18）——html5地理定位的内容。