适合0基础的web开发系列教程-H5定位

使用html5可以获取地理位置并进行定位。

本文讲解的主要是移动端的定位，pc端也可以定位，但是有的pc电脑禁用了定位功能，获取不到位置信息，需要自己去打开定位设置，不同操作系统设置方式大同小异，如果不清楚如何设置的，可以自己搜索下相关设置。
获取地理位置进行定位有三种方法原生h5，百度地图，谷歌地图。

h5提供了地理位置功能（Geolocation API),定位功能（Geolocation）是HTML5的新特性，因此只有在支持HTML5的现代浏览器上运行，特别是手持设备如iphone，地理定位更加精确。

首先我们要检测用户设备浏览器是否支持地理定位，如果支持则获取地理信息。注意这个特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的，所以我们在访问该应用时会提示是否允许地理定位，我们当然选择允许即可。

　　　　

　　

function getLocation(){ 
if (navigator.geolocation){ 
navigator.geolocation.getCurrentPosition(showPosition,showError); 
}else{ 
alert("浏览器不支持地理定位。"); 
} 
} 

　　

　　如果用户设备支持地理定位，则运行 getCurrentPosition() 如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象，getCurrentPosition() 方法的第二个参数showError用于处理错误，它规定当获取用户位置失败时运行的函数。
　　我们先来看一下函数showError(),它规定获取用户地理位置失败时的一些错误代码处理方式：
　　
　　

function showError(error){ 
switch(error.code) { 
case error.PERMISSION_DENIED: 
alert("定位失败,用户拒绝请求地理定位"); 
break; 
case error.POSITION_UNAVAILABLE: 
alert("定位失败,位置信息是不可用"); 
break; 
case error.TIMEOUT: 
alert("定位失败,请求获取用户位置超时"); 
break; 
case error.UNKNOWN_ERROR: 
alert("定位失败,定位系统失效"); 
break; 
} 
} 

 

　　　　
函数showPosition(),调用coords的latitude和longitude即可获取到用户的纬度和经度。

　　　　

function showPosition(position){ 
var lat = position.coords.latitude; //纬度 
var lag = position.coords.longitude; //经度 
alert('纬度:'+lat+',经度:'+lag); 
} 

　　　

下面我们把抽象的经纬度转成可读的有意义的真正的用户地理位置信息。

百度地图和谷歌地图等提供了这方面的接口，我们只需要将HTML5获取到的经纬度信息传给地图接口，就可返回用户所在的地理位置，包括省市区信息，甚至有街道、门牌号等详细的地理位置信息。

注意：第三方接口的api可能会升级或者变化，如果你调用不起，可以参考百度地图api官方文档。

　　我们首先在页面定义要展示地理位置的div，分别定义id#baidu_geo和id#google_geo。我们只需修改关键函数showPosition()。先来看百度地图接口交互，我们将经纬度信息通过Ajax方式发送给百度地图接口，接口会返回相应的省市区街道信息。百度地图接口返回的是一串JSON数据，我们可以根据需求将需要的信息展示给div#baidu_geo。注意这里用到了jQuery库，需要先加载jQuery库文件。

另外需要在百度注册账号和生成对应的AK序号,正式环境下要用自己的AK才能成功，如果不熟悉此过程的可以加QQ：1416759661.
　　

function showPosition(position){ 
var latlon = position.coords.latitude+','+position.coords.longitude; 

//baidu
var url = "http://api.map.baidu.com/geocoder/v2/?ak=bbbb5178d7a8cccc830b9b557abckkkk&callback=renderReverse&location="+latlon+"&output=json&pois=0"; 
$.ajax({ 
type: "GET", 
dataType: "jsonp", 
url: url, 
beforeSend: function(){ 
$("#baidu_geo").html('正在定位...'); 
}, 
success: function (json) { 
if(json.status==0){ 
$("#baidu_geo").html(json.result.formatted_address); 
} 
}, 
error: function (XMLHttpRequest, textStatus, errorThrown) { 
$("#baidu_geo").html(latlon+"地址位置获取失败"); 
} 
}); 
});

　　

　　再来看谷歌地图接口。（前提：你的网络能访问google网站,此方法作者没有测试通过，同学们可以自己尝试）
　　　　

function showPosition(position){ 
var latlon = position.coords.latitude+','+position.coords.longitude; 

//google 
var url = 'http://maps.google.cn/maps/api/geocode/json?latlng='+latlon+'&language=CN'; 
$.ajax({ 
type: "GET", 
url: url, 
beforeSend: function(){ 
$("#google_geo").html('正在定位...'); 
}, 
success: function (json) { 
if(json.status=='OK'){ 
var results = json.results; 
$.each(results,function(index,array){ 
if(index==0){ 
$("#google_geo").html(array['formatted_address']); 
} 
}); 
} 
}, 
error: function (XMLHttpRequest, textStatus, errorThrown) { 
$("#google_geo").html(latlon+"地址位置获取失败"); 
} 
}); 
}

以上的代码分别将百度地图接口和谷歌地图接口整合到函数showPosition()中，我们可以根据实际情况进行调用。