網頁獲取用戶位置信息的辦法
1 調用百度地圖的地圖標注功能,通過百度地圖API獲取對應的經度和緯度進而獲取地區信息
優點是比較准確,缺點是需要用戶自己選擇位置
2 通過H5 geolocation屬性獲取經度和緯度,優點是用戶只需要點擊允許獲取即可,缺點是瀏覽器獲取的經度相對不是很准確而且仍舊需要用戶確認。
3 通過用戶IP來分析用戶位置(待后續研究)
下面是第二種方法的代碼實現
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>基於瀏覽器的HTML5查找地理位置</title>
<!-- 百度API -->
<script src="http://api.map.baidu.com/api?v=1.2" type="text/javascript"></script>
<script>
function getLocation(){
var options={
enableHighAccuracy:true,
maximumAge:1000
}
if(navigator.geolocation){
//瀏覽器支持geolocation
navigator.geolocation.getCurrentPosition(onSuccess,onError,options);
}else{
//瀏覽器不支持geolocation
alert('您的瀏覽器不支持地理位置定位');
}
}
//成功時
function onSuccess(position){
//返回用戶位置
//經度
var longitude =position.coords.longitude;
//緯度
var latitude = position.coords.latitude;
alert('經度'+longitude+',緯度'+latitude);
//根據經緯度獲取地理位置,不太准確,獲取城市區域還是可以的
var map = new BMap.Map("allmap");
var point = new BMap.Point(longitude,latitude);
var gc = new BMap.Geocoder();
gc.getLocation(point, function(rs){
var addComp = rs.addressComponents;
alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
});
}
//失敗時
function onError(error){
switch(error.code){
case 1:
alert("位置服務被拒絕");
break;
case 2:
alert("暫時獲取不到位置信息");
break;
case 3:
alert("獲取信息超時");
break;
case 4:
alert("未知錯誤");
break;
}
}
window.onload=getLocation;
</script>
</head>
<body>
</body>
</html>