<html>
<body>
<p id="demo">点击这个按钮，获得您的坐标：</p>
<button onclick="getLocation()">试一下</button>
<script>
/* 例子解释：
检测是否支持地理定位
如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。
如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象
showPosition() 函数获得并显示经度和纬度 */
var x=document.getElementById("demo")
function getLocation()
{
if (navigator.geolocation)
{
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>
定位功能（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的Geolocation可以获取用户的经纬度，那么我们要做的是需要把抽象的经纬度转成可读的有意义的真正的用户地理位置信息。幸运的是百度地图和谷歌地图等提供了这方面的接口，我们只需要将HTML5获取到的经纬度信息传给地图接口，则会返回用户所在的地理位置，包括省市区信息，甚至有街道、门牌号等详细的地理位置信息。
我们首先在页面定义要展示地理位置的div，分别定义id#baidu_geo和id#google_geo。我们只需修改关键函数showPosition()。先来看百度地图接口交互，我们将经纬度信息通过Ajax方式发送给百度地图接口，接口会返回相应的省市区街道信息。百度地图接口返回的是一串JSON数据，我们可以根据需求将需要的信息展示给div#baidu_geo。注意这里用到了jQuery库，需要先加载jQuery库文件。
function showPosition(position){
var latlon = position.coords.latitude+','+position.coords.longitude
//baidu
var url = "<a href="http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback=renderReverse&location="+latlon+"&output=json&pois=0">http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback=renderReverse&location="+latlon+"&output=json&pois=0</a>"
$.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+"地址位置获取失败")
}
})
})
再来看谷歌地图接口交互。同样我们将经纬度信息通过Ajax方式发送给谷歌地图接口，接口会返回相应的省市区街道详细信息。谷歌地图接口返回的也是一串JSON数据，这些JSON数据比百度地图接口返回的要更详细，我们可以根据需求将需要的信息展示给div#google_geo。
function showPosition(position){
var latlon = position.coords.latitude+','+position.coords.longitude
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+"地址位置获取失败")
}
})
}
地理位置获取流程：1、用户打开需要获取地理位置的web应用。
2、应用向浏览器请求地理位置，浏览器d出询问窗口，询问用户是否共享地理位置。
3、假设用户允许，浏览器从设别查询相关信息。
4、浏览器将相关信息发送到一个信任的位置服务器，服务器返回具体的地理位置。
检测浏览器支持：
JavaScript Code复制内容到剪贴板
function loadDemo() {
if(navigator.geolocation) {
document.getElementById(“support”).innerHTML = “HTML5 Geolocation supported.”
} else {
document.getElementById(“support”).innerHTML = “HTML5 Geolocation is not supported in
your browser.”
}
}
位置请求方式：
单次请求
JavaScript Code复制内容到剪贴板
navigator.geolocation.getCurrentPosition(updateLocation, handleLocationError, options)
回调函数updateLocation接受一个对象参数，表示当前的地理位置，它有如下属性：
latitude——纬度
longitude——精度
accuracy——精确度，单位米
altitude——高度，单位米
altitudeAccuracy——高度的精确地，单位米
heading—运动的方向，相对于正北方向的角度
speed——运动的速度（假设你在地平线上运动），单位米/秒
回调函数handleLocationError接受错误对象，error.code是如下错误号。
UNKNOWN_ERROR (error code 0) —— 错误不在如下三种之内，你可以使用error.message获取错误详细信息。
PERMISSION_DENIED (error code 1)—— 用不选择不共享地理位置
POSITION_UNAVAILABLE (error code 2) ——无法获取当前位置
TIMEOUT (error code 3) ——在指定时间无法获取位置会触发此错误。
第三个参数options是可选参数，属性如下：
enableHighAccuracy——指示浏览器获取高精度的位置，默认为false。当开启后，可能没有任何影响，也可能使浏览器花费更长的时间获取更精确的位置数据。
timeout——指定获取地理位置的超时时间，默认不限时。单位为毫秒。
maximumAge——最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。默认为0，表示浏览器需要立刻重新计算位置。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）