欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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

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

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

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

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

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

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

  • enableHighAccuracy屬性要求高精度的GPS位置檢測。除非確實需要精確的坐標，否則不需要設(shè)置這個項(在移動手機上非常耗電)，默認是false。

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

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

地圖顯示

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

  • 鏈接到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>

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

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

這樣就可以給它設(shè)置樣式，申明地圖的大小：

#mapSurface { width: 600px; height: 400px; border: solid 1px black; }

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

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

var results; var map; window.onload = function() { results = document.getElementById("results"); //設(shè)置地圖選項，這里設(shè)置了起始縮放級別和地圖類型，要詳細了//解可以看看Google Maps文檔 var myOptions = { zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }; //使用前面設(shè)置的項來創(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)建了地圖，但還不能再頁面上看到它。因為還沒有設(shè)置地理位置，要設(shè)置地理位置，得用Latlng對象創(chuàng)建一個坐標點，然后再通過地圖的setCenter()方法把該點放到地圖上。以下就是使用訪客坐標創(chuàng)建坐標點并將該點放到地圖上的代碼：

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

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

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

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

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

HTML5之地理定位（二）

HTML5之地理定位（二）

好吧，雖然不準確(我使用的是臺式機通過有線連接接入Internet)，但畢竟還是找出了我的大體位置。

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

需要學習的朋友可以下載附件。

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

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

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

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

廣告

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

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