1.生活中自动定位的使用场景:
(1)百度、谷歌地图已成为我们出行的必备助手,其中会获取当前的位置
(2)各公司的签到软件,为防止小伙伴们修改签到地点会采用自动定位等
2.自动定位基础原理:
移动端接受卫星信号,获取当前手机的地理位置(经度与纬度),然后依据经纬度反射出当前位置的实际地址(pc端浏览器暂不支持此功能)
3.前端开发
我们可以通过调用谷歌或者百度的定位接口,来获取自己的当前位置
(1)html部分
<div class="weui_cell"> <div class="weui_cell_hd"><label id="latlon">位置</label></div> <div class="weui_cell_bd weui_cell_primary"> <textarea class="weui_textarea address" id="baidu_geo">定位中...</textarea> </div> </div>
(2)js部分
<script type="text/javascript">
$(function () {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, locationError);
} else {
alert("你的浏览器不支持 GeoLocation.");
}
});
//定位成功时,执行的函数
function showPosition(position){
//$("#latlon").html("纬度:"+position.coords.latitude +',经度:'+ position.coords.longitude);
var Wei=position.coords.latitude;
var Jing=position.coords.longitude;
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";
var url ="http://api.map.baidu.com/geocoder/v2/?callback=renderReverse&location="+Wei+","+Jing+"&output=json&pois=1&ak=UcxbIt99PwqVOOYWTDbGZxHkHkSGrvYB";
$.ajax({
type: "GET",
dataType: "jsonp",
url: url,
beforeSend: function(){
$("#baidu_geo").val('正在定位...');
},
success: function (json) {
if(json.status==0){
var sxCity=json.result.formatted_address;
var sBusiness=json.result.business;
var sDecematic=json.result.sematic_description;
var sAddress=sxCity+sBusiness+sDecematic;
$("#baidu_geo").val( sAddress);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$("#baidu_geo").val(latlon+"地址位置获取失败");
}
});
}
// 定位失败时,执行的函数
function locationError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
alert("User denied the request for Geolocation.");
break;
case error.POSITION_UNAVAILABLE:
alert("Location information is unavailable.");
break;
case error.TIMEOUT:
alert("The request to get user location timed out.");
break;
case error.UNKNOWN_ERROR:
alert("An unknown error occurred.");
break;
}
}
</script>
有以上2部分,我们编写的前端界面就会自动定位当前位置。
浙公网安备 33010602011771号