日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
讓HTML5來為你定位

Geolocation

成都創(chuàng)新互聯(lián)公司主要從事成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)青州,十余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):13518219792

HTML5 的 geolocation 是一個(gè)令人興奮的 API，通過這套 API，Javascript 代碼就能夠訪問到用戶的當(dāng)前位置。當(dāng)然，訪問之前必須得到用戶的明確認(rèn)可，即同意在頁面共享位置。如果頁面嘗試訪問地理位置信息，瀏覽器就會顯示一個(gè)對話 框，請求用戶許可共享其地理位置信息，比如這樣：

用戶同意（允許）之后，Geolocation 的 api 就能起作用了。

getCurrentPosition() 方法

Geolocation API 在瀏覽器中的實(shí)現(xiàn)是 navigator.geolocation 對象，這個(gè)對象包含 3 個(gè)方法。第一個(gè)方法是 getCurrentPosition()，調(diào)用這個(gè)方法就會觸發(fā)請求用戶共享地理定位信息的對話框。這個(gè)方法接收 3 個(gè)參數(shù)：成功回調(diào)函數(shù)，可選的失敗回調(diào)函數(shù)和可選的選項(xiàng)對象。

其中，成功回調(diào)函數(shù)會接收到一個(gè) Position 對象參數(shù)，該對象有兩個(gè)屬性：coords 和 timestamp。而 coords 對象中將包含下列與位置相關(guān)的信息。

  • latitude：以十進(jìn)制度數(shù)表示的維度

  • longtitude：以十進(jìn)制度數(shù)表示的經(jīng)度

  • accuracy：經(jīng)緯度坐標(biāo)的精度，以米為單位

有些瀏覽器可能會在 coords 對象中提供如下屬性。

  • altitude：以米為單位的海拔高度，如果沒有相關(guān)數(shù)據(jù)則值為 null

  • altitudeAccuracy：海拔高度的精度，以米為單位，數(shù)值越大越不精確

  • heading：指南針的方向，0°表示正北，值為 NaN 表示沒有檢測到數(shù)據(jù)

  • speed：速度，即每秒移動多少米，如果沒有相關(guān)數(shù)據(jù)則值為 null

說了這么多，我們來簡單應(yīng)用下，寫一段代碼獲取當(dāng)前的經(jīng)緯度，然后輸出：

  
 
    
   
  
  1. navigator.geolocation.getCurrentPosition(geo_success, geo_error);
    2. 
   
  
  2. 
   
  
  3. function geo_success(position) {
    4. 
   
  
  4.   console.log(position.coords.latitude, position.coords.longitude);
    5. 
   
  
  5. }
    6. 
   
  
  6. 
   
  
  7. function geo_error(msg) {
    8. 
   
  
  8.   console.log(msg.code, msg.message);
    9. 
   
  
  9. }
    10.

代碼很簡單，如果請求成功了就執(zhí)行 geo_success() 函數(shù)，打印經(jīng)緯度，如果失敗了，輸出一些信息（失敗回調(diào)）。

getCurrentPosition() 的第二個(gè)參數(shù)，即失敗回調(diào)函數(shù)，在被調(diào)用的時(shí)候也會接收到一個(gè)參數(shù)。這個(gè)參數(shù)是一個(gè)對象，包含兩個(gè)屬性：message和code。 其中，message 屬性中保存著給人看的文本消息，解釋為什么會出錯(cuò)，而 code 屬性中保存著一個(gè)數(shù)值，表示錯(cuò)誤的類型：用戶拒絕共享（1），位置無效（2）或者超時(shí)（3）。實(shí)際開發(fā)中，大多數(shù) Web 應(yīng)用只會講錯(cuò)誤消息保存到日志文件中，而不一定會修改用戶界面。

我們在 PC 端的 chrome 瀏覽器中執(zhí)行這段代碼，結(jié)果是令人遺憾的：

掐指一算，估計(jì)是被墻了... 事實(shí)上，以 Chrome 瀏覽器為例，如果您允許 Chrome 瀏覽器與網(wǎng)站共享您的位置，Chrome 瀏覽器會向 Google 位置服務(wù)（此環(huán)節(jié)被墻）發(fā)送本地網(wǎng)絡(luò)信息，估計(jì)您所在的位置。然后，瀏覽器會與請求使用您位置的網(wǎng)站共享您的位置。

接著在 Android 機(jī)上測試了下，沒被墻，畢竟谷歌是 Android 的親爹啊。打印出來的信息如下：

31.188199 121.632919

當(dāng)然只是知道經(jīng)緯度或許不太那么直觀，如果能把位置顯示在地圖上那就直觀多了！這里我用了高德地圖的API（猛戳這里看效果）：

  
 
    
   
  
  1. 
   
  
  2. 
   
  
  3. 
   
  
  4.    
    5. 
   
  
    6. 
   
  
  6.  地圖顯示 
    7. 
   
  
  7.    
  •   

    • 在手機(jī)上打開后：

    我的天哪！實(shí)在是太準(zhǔn)了！如果我把代碼里的 zoom 參數(shù)再加大點(diǎn)，能精確到小區(qū)了...當(dāng)然，這并不奇怪，因?yàn)檫@本來就是高德地圖百度地圖定位的一部分嘛。

    事實(shí)上，getCurrentPosition() 還有第三個(gè)參數(shù)，該參數(shù)是一個(gè)選項(xiàng)對象，用于設(shè)定信息的類型?？梢栽O(shè)置的選項(xiàng)有三個(gè)：enableHighAccuracy 是一個(gè)布爾值，表示必須盡可能使用最精確的位置信息；timeout 是以毫秒數(shù)表示的等待位置信息的最長時(shí)間；maximumAge 表示上一次取得的坐標(biāo)信息的有效時(shí)間，以毫秒表示，如果時(shí)間到則重新取得新坐標(biāo)信息。

    除非確實(shí)需要非常精確的信息，否則建議保持 enableHighAccuracy 的 false 值（默認(rèn)值）。將這個(gè)選項(xiàng)設(shè)置為 true 需要更長的時(shí)候，而且在移動設(shè)備上更耗電。類似的，如果不需要頻繁更新用戶的位置信息，那么可以將 maximumAge 設(shè)置為 Infinity，從而始終都使用上一次的坐標(biāo)信息。

      
 
      
   
  
    1. navigator.geolocation.getCurrentPosition(locationSuccess, locationError, {
      2. 
   
  
    2.   // 指示瀏覽器獲取高精度的位置，默認(rèn)為false
      3. 
   
  
    3.   enableHighAcuracy: true,
      4. 
   
  
    4.   // 指定獲取地理位置的超時(shí)時(shí)間，默認(rèn)不限時(shí)，單位為毫秒
      5. 
   
  
    5.   timeout: 5000,
      6. 
   
  
    6.   // 最長有效期，在重復(fù)獲取地理位置時(shí)，此參數(shù)指定多久再次獲取位置。
      7. 
   
  
    7.   maximumAge: 3000
      8. 
   
  
    8. });
      9.

    watchPosition() 方法

    如果要跟蹤用戶的位置，那么可以使用 watchPosition() 方法。這個(gè)方法的使用和 getCurrentPosition() 完全相同。實(shí)際上 watchPosition() 與定時(shí)調(diào)用 getCurrentPosition() 能得到相同效果。在第一次調(diào)用 watchPosition() 方法后，會取得當(dāng)前位置，執(zhí)行成功回調(diào)或者錯(cuò)誤回調(diào)。然后，watchPosition() 就地等待系統(tǒng)發(fā)出位置已改變的信號。

    調(diào)用 watchPosition() 會返回一個(gè)數(shù)值標(biāo)識符，用于跟蹤監(jiān)控的操作?；谶@個(gè)返回值可以取消監(jiān)控操作，只要將其傳遞給 clearWatch() 方法即可（與使用 setTimeout() 和 clearTimeout() 類似），例如：

      
 
      
   
  
    1. var watchId = navigator.geolocation.watchPosition(geo_success, geo_error);
      2. 
   
  
    2. clearWatch(watchId);
      3.

    Geolocation 定位原理

    Geolocation API 的數(shù)據(jù)來源可能是 GPS、IP 地址、RFID、WiFi、藍(lán)牙 MAC 地址、GSM/CDMA 卡 ID 等。因?yàn)?Geolocation API 是運(yùn)行在你本地設(shè)備上的。所以，在使用 VPN 或代理的情況下，Geo API 仍能獲得你準(zhǔn)確的 IP 地址信息（除非因?yàn)槟承┮蛩貫g覽器獲取不到這些信息）。

    在HTML5的實(shí)現(xiàn)中，手機(jī)等移動設(shè)備當(dāng)然優(yōu)先使用GPS定位，而筆記本和部分平板，最準(zhǔn)的定位是WIFI，至于網(wǎng)線上網(wǎng)的臺式機(jī)，一般就只能使用IP來定位了，這個(gè)準(zhǔn)確度最低。

    read more：

    • HTML5 中 Geolocation 獲取地理位置的原理是什么？

    • 使用 HTML5 Geolocation 構(gòu)建基于地理位置的 Web 應(yīng)用

    • Geolocation

    • How HTML5 Geolocation Feature Works?


    分享文章：讓HTML5來為你定位
    文章分享：http://m.5511xx.com/article/coojcpe.html