HTML5利用Geolocation API获取地理位置定位功能

如何使用html5地理位置定位功能

定位功能(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); 
} 
获取到地理位置就可以百度或者谷歌接口获取位置了,但是准确差别大,勉强吧。



function showPosition(position){ 
    var latlon = position.coords.latitude+','+position.coords.longitude; 
     
    //baidu 
    var url = "http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&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+"地址位置获取失败");  
        } 
    }); 
}); 
谷歌接口:



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+"地址位置获取失败");  
        }  
    }); 
} 


演示: http://www.jincon.com/download/location/

关键词: 定位 , 获取地理位置 , html5

上一篇: 砸金蛋:PHP+jQuery实现的砸金蛋中奖功能
下一篇: 高并发下LNMP的构架考虑及资源分配简单思考 

目前还没有人评论,您发表点看法?
发表评论

评论内容 (必填):