您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)HTML5的地理定位怎么使用,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
地理位置(Geolocation)是 HTML5 的重要特性之一,提供了確定用戶位置的功能,借助這個(gè)特性能夠開發(fā)基于位置信息的應(yīng)用。今天這篇文章向大家介紹一下 HTML5 地理位置定位的基本原理及各個(gè)瀏覽器的數(shù)據(jù)精度情況。
在訪問位置信息前,瀏覽器都會(huì)詢問用戶是否共享其位置信息,以 Chrome 瀏覽器為例,如果您允許 Chrome 瀏覽器與網(wǎng)站共享您的位置,Chrome 瀏覽器會(huì)向 Google 位置服務(wù)發(fā)送本地網(wǎng)絡(luò)信息,估計(jì)您所在的位置。然后,瀏覽器會(huì)與請求使用您位置的網(wǎng)站共享您的位置。
HTML5 Geolocation API 使用非常簡單,基本調(diào)用方式如下:
if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(locationSuccess, locationError,{ // 指示瀏覽器獲取高精度的位置,默認(rèn)為false enableHighAccuracy: true, // 指定獲取地理位置的超時(shí)時(shí)間,默認(rèn)不限時(shí),單位為毫秒 timeout: 5000, // 最長有效期,在重復(fù)獲取地理位置時(shí),此參數(shù)指定多久再次獲取位置。 maximumAge: 3000 }); }else{ alert("Your browser does not support Geolocation!"); }
locationError為獲取位置信息失敗的回調(diào)函數(shù),可以根據(jù)錯(cuò)誤類型提示信息:
locationError: function(error){ switch(error.code) { case error.TIMEOUT: showError("A timeout occured! Please try again!"); break; case error.POSITION_UNAVAILABLE: showError('We can\'t detect your location. Sorry!'); break; case error.PERMISSION_DENIED: showError('Please allow geolocation access for this to work.'); break; case error.UNKNOWN_ERROR: showError('An unknown error occured!'); break; } }
locationSuccess為獲取位置信息成功的回調(diào)函數(shù),返回的數(shù)據(jù)中包含經(jīng)緯度等信息,結(jié)合Google Map API 即可在地圖中顯示當(dāng)前用戶的位置信息,如下:
locationSuccess: function(position){ var coords = position.coords; var latlng = new google.maps.LatLng( // 維度 coords.latitude, // 精度 coords.longitude ); var myOptions = { // 地圖放大倍數(shù) zoom: 12, // 地圖中心設(shè)為指定坐標(biāo)點(diǎn) center: latlng, // 地圖類型 mapTypeId: google.maps.MapTypeId.ROADMAP }; // 創(chuàng)建地圖并輸出到頁面 var myMap = new google.maps.Map( document.getElementById("map"),myOptions ); // 創(chuàng)建標(biāo)記 var marker = new google.maps.Marker({ // 標(biāo)注指定的經(jīng)緯度坐標(biāo)點(diǎn) position: latlng, // 指定用于標(biāo)注的地圖 map: myMap }); //創(chuàng)建標(biāo)注窗口 var infowindow = new google.maps.InfoWindow({ content:"您在這里<br/>緯度:"+ coords.latitude+ "<br/>經(jīng)度:"+coords.longitude }); //打開標(biāo)注窗口 infowindow.open(myMap,marker); }
經(jīng)過測試,Chrome/Firefox/Safari/Opera四個(gè)瀏覽器獲取到的位置信息都是一摸一樣的,估計(jì)都是用的同一個(gè)位置服務(wù),數(shù)據(jù)如下:
而IE瀏覽器的和上面幾款瀏覽器獲取到的數(shù)據(jù)不一樣,數(shù)據(jù)如下:
關(guān)于HTML5的地理定位怎么使用就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。