HTML5之地理定位（二）-創(chuàng)新互聯(lián)

從地理定位（一）了解了地理定位的原理及基本的知識(shí)，下面學(xué)習(xí)設(shè)置地理定位選項(xiàng)及地圖的顯示。

10余年的烏當(dāng)網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。全網(wǎng)整合營(yíng)銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整烏當(dāng)建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)公司從事“烏當(dāng)網(wǎng)站設(shè)計(jì)”,“烏當(dāng)網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

設(shè)置地理定位選項(xiàng)

前面的學(xué)習(xí)已知道調(diào)用getCurrentPosition()時(shí)可以傳入兩個(gè)參數(shù)，實(shí)際上還可以設(shè)置第三個(gè)參數(shù)：

navigator.geolocation.getCurrentPosition( geolocationSuccess, geolocationFailure， {enableHighAccuracy：true， timeout：10000， maxmumAge:60000 } );

下面解釋下第三個(gè)參數(shù)的意義：

  • enableHighAccuracy屬性要求高精度的GPS位置檢測(cè)。除非確實(shí)需要精確的坐標(biāo)，否則不需要設(shè)置這個(gè)項(xiàng)(在移動(dòng)手機(jī)上非常耗電)，默認(rèn)是false。

  • timeout屬性設(shè)置在放棄之前等待位置數(shù)據(jù)的時(shí)間，以毫秒為單位，這里10000是指用戶按下同意數(shù)據(jù)的選項(xiàng)時(shí)，最多等待10秒。否則放棄(超時(shí))。

  • maxmumAge屬性用于緩存位置數(shù)據(jù)，比如把maxmumAge設(shè)置為60000 毫秒，之前的數(shù)據(jù)最多保存1分鐘，之后重新獲得位置數(shù)據(jù)。這樣做，是為當(dāng)用戶處于移動(dòng)狀態(tài)時(shí)，獲得及時(shí)的位置數(shù)據(jù)(越精確的位置數(shù)據(jù))。

地圖顯示

得到了位置數(shù)據(jù)，最有用的就是把自定義的數(shù)據(jù)點(diǎn)放在地圖上。比如顯示公司的位置，或是乘車路線。下面就在地圖上顯示我當(dāng)前的位置：

  • 鏈接到Google Maps API腳本，并把它放在使用地圖功能的自定義腳本前頭，如下：

<head> <meta charset="utf-8"> <title>Geolocation Map</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> ... </head>

  • 用一個(gè)<div>元素盛放動(dòng)態(tài)生成的地圖，如下：

<body> <p id="results">你生活在哪?</p> <div id="mapSurface"></div> </body>

這樣就可以給它設(shè)置樣式，申明地圖的大?。?/p>#mapSurface { width: 600px; height: 400px; border: solid 1px black; }

使用Google Maps地圖的準(zhǔn)備工作都做好了，接下來(lái)應(yīng)該考慮顯示地圖，這個(gè)例子是在頁(yè)面加載時(shí)使用地圖。

以下是頁(yè)面加載時(shí)運(yùn)行的代碼，首先是創(chuàng)建地圖，然后通過(guò)地理定位查找用戶(這里是我)的位置：

var results; var map; window.onload = function() { results = document.getElementById("results"); //設(shè)置地圖選項(xiàng)，這里設(shè)置了起始縮放級(jí)別和地圖類型，要詳細(xì)了//解可以看看Google Maps文檔 var myOptions = { zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }; //使用前面設(shè)置的項(xiàng)來(lái)創(chuàng)建地圖 map = new google.maps.Map(document.getElementById("mapSurface"), myOptions); //嘗試取得用戶的位置 if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( geolocationSuccess, geolocationFailure ); results.innerHTML = "定位已開始."; } else { results.innerHTML = "該瀏覽器不支持地理定位"; } }

上面的代碼創(chuàng)建了地圖，但還不能再頁(yè)面上看到它。因?yàn)檫€沒(méi)有設(shè)置地理位置，要設(shè)置地理位置，得用Latlng對(duì)象創(chuàng)建一個(gè)坐標(biāo)點(diǎn)，然后再通過(guò)地圖的setCenter()方法把該點(diǎn)放到地圖上。以下就是使用訪客坐標(biāo)創(chuàng)建坐標(biāo)點(diǎn)并將該點(diǎn)放到地圖上的代碼：

function geolocationSuccess(position) { //把地理定位的位置轉(zhuǎn)換為L(zhǎng)atlng對(duì)象 location = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); //在地圖上顯示該店 map.setCenter(location); }

有了這些代碼就就可以在頁(yè)面上顯示地圖了。當(dāng)然還可以在地圖上添加一些輔助功能，比如其位置和氣泡。比如創(chuàng)建信息氣泡需要?jiǎng)?chuàng)建一個(gè)Info人Window對(duì)象，下面的代碼就是在地圖上創(chuàng)建信息氣泡：

var infowindow = new google.maps.InfoWindow(); //創(chuàng)建信息氣泡并設(shè)置其文本內(nèi)容個(gè)地圖坐標(biāo) infowindow.setContent("我在這里或是附近"); infowindow.setPosition(location); //顯示地圖氣泡 infowindow.open(map); results.innerHTML = "現(xiàn)在你在地圖上。";

最后如果瀏覽器不支持地理定位，處理方法于此類似，可以用一個(gè)已知的坐標(biāo)點(diǎn)(而不是獲取的位置)來(lái)創(chuàng)建地圖。

最后在瀏覽器上就可以看到如下的效果：

HTML5之地理定位（二）

HTML5之地理定位（二）

好吧，雖然不準(zhǔn)確(我使用的是臺(tái)式機(jī)通過(guò)有線連接接入Internet)，但畢竟還是找出了我的大體位置。

小結(jié)：Internet的發(fā)展帶來(lái)前所未有的便利，但是這些技術(shù)的發(fā)展是我們的位置暴漏無(wú)疑，尤其是使用智能手機(jī)接入網(wǎng)時(shí)。只要你接打電話，或是上網(wǎng)，或是使用內(nèi)置GPS的設(shè)備等，我們的位置就已經(jīng)告訴了Internet。

需要學(xué)習(xí)的朋友可以下載附件。

附件：http://down.51cto.com/data/2362801

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

文章名稱：HTML5之地理定位（二）-創(chuàng)新互聯(lián)
新聞來(lái)源：http://muchs.cn/article32/dsgopc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、建站公司、網(wǎng)站營(yíng)銷、服務(wù)器托管、ChatGPT、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

商城網(wǎng)站建設(shè)