Geolocation接口不可以獲取手機的gps定位,這個api具有自己特有的定位方式。
創(chuàng)新互聯(lián)長期為上千客戶提供的網(wǎng)站建設服務,團隊從業(yè)經(jīng)驗10年,關注不同地域、不同群體,并針對不同對象提供差異化的產品和服務;打造開放共贏平臺,與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為順城企業(yè)提供專業(yè)的網(wǎng)站制作、成都網(wǎng)站制作,順城網(wǎng)站改版等技術服務。擁有十載豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
定位用戶的位置
HTML5 Geolocation API 用于獲得用戶的地理位置。
鑒于該特性可能侵犯用戶的隱私,除非用戶同意,否則用戶位置信息是不可用的。
用法如下:
!DOCTYPE html
html
body
p id="demo"點擊這個按鈕,獲得您的位置:/p
button onclick="getLocation()"試一下/button
div id="mapholder"/div
script src=""/script
script
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
lat=position.coords.latitude;
lon=position.coords.longitude;
latlon=new google.maps.LatLng(lat, lon)
mapholder=document.getElementById('mapholder')
mapholder.style.height='250px';
mapholder.style.width='500px';
var myOptions={
center:latlon,zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
};
var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
}
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
}
/script
/body
/html
HTML5中可以通過localStorage數(shù)據(jù)與JSON對象的轉換,快速實現(xiàn)存儲更多數(shù)據(jù)的功能。
將localStorage數(shù)據(jù)轉成JSON對象,需要調用JSON對象的parse()方法,JSON.parse(data)。其中data就是localStorage對象獲取的數(shù)據(jù),調用該方法將返回一個裝載data數(shù)據(jù)的JSON對象。
通過stringify()方法,將一個實體對象轉換為JSON格式的文本數(shù)據(jù),JSON.stringify(obj)。obj表示任意一個實體對象,該方法返回一個由實體對象轉成JSON格式的文本數(shù)據(jù)集。
下例所示:
function addStu(){
var sno=$$("sno").value,
name=$$("name").value,
sex=$$("sex").value,
score=$$("score").value;
//聲明一個實體對象,將學生的信息當作對象的成員
var
dataSet=new Object;
dataSet.sno=sno;
dataSet.name=name;
dataSet.sex=sex;
dataSet.score=score;
//把dataSet這個對象轉換成JSON格式的文本數(shù)據(jù)
var
list=JSON.stringify(dataSet);
localStorage.setItem(sno,list);
getlocalData();
}
function getlocalData(){
var addInfo="";
for(var i=0;i
var key=localStorage.key(i);
//把json格式的字符串轉換成JSON對象
var
dataSet=JSON.parse(localStorage.getItem(key));
addInfo+="
"+dataSet.sno
+""+dataSet.name
+""+dataSet.sex
+""+dataSet.score
+"";
$$("allInfo").innerHTML=addInfo;
}
}
[img]定位功能(Geolocation)是HTML5的新特性,因此只有在支持HTML5的現(xiàn)代瀏覽器上運行,特別是手持設備如iphone,地理定位更加精確。首先我們要檢測用戶設備瀏覽器是否支持地理定位,如果支持則獲取地理信息。注意這個特性可能侵犯用戶的隱私,除非用戶同意,否則用戶位置信息是不可用的,所以我們在訪問該應用時會提示是否允許地理定位,我們當然選擇允許即可。
function getLocation(){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition,showError);
}else{
alert("瀏覽器不支持地理定位。");
}
}
上面的代碼可以知道,如果用戶設備支持地理定位,則運行 getCurrentPosition() 方法。如果getCurrentPosition()運行成功,則向參數(shù)showPosition中規(guī)定的函數(shù)返回一個coordinates對象,getCurrentPosition() 方法的第二個參數(shù)showError用于處理錯誤,它規(guī)定當獲取用戶位置失敗時運行的函數(shù)。
我們先來看函數(shù)showError(),它規(guī)定獲取用戶地理位置失敗時的一些錯誤代碼處理方式:
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("定位失敗,定位系統(tǒng)失效");
break;
}
}
我們再來看函數(shù)showPosition(),調用coords的latitude和longitude即可獲取到用戶的緯度和經(jīng)度。
function showPosition(position){
var lat = position.coords.latitude; //緯度
var lag = position.coords.longitude; //經(jīng)度
alert('緯度:'+lat+',經(jīng)度:'+lag);
}
利用百度地圖和谷歌地圖接口獲取用戶地址
上面我們了解了HTML5的Geolocation可以獲取用戶的經(jīng)緯度,那么我們要做的是需要把抽象的經(jīng)緯度轉成可讀的有意義的真正的用戶地理位置信息。幸運的是百度地圖和谷歌地圖等提供了這方面的接口,我們只需要將HTML5獲取到的經(jīng)緯度信息傳給地圖接口,則會返回用戶所在的地理位置,包括省市區(qū)信息,甚至有街道、門牌號等詳細的地理位置信息。
我們首先在頁面定義要展示地理位置的div,分別定義id#baidu_geo和id#google_geo。我們只需修改關鍵函數(shù)showPosition()。先來看百度地圖接口交互,我們將經(jīng)緯度信息通過Ajax方式發(fā)送給百度地圖接口,接口會返回相應的省市區(qū)街道信息。百度地圖接口返回的是一串JSON數(shù)據(jù),我們可以根據(jù)需求將需要的信息展示給div#baidu_geo。注意這里用到了jQuery庫,需要先加載jQuery庫文件。