偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

HTML5 地理位置定位(HTML5 Geolocation)原理及應(yīng)用

開發(fā) 前端
地理位置(Geolocation)是 HTML5 的重要特性之一,提供了確定用戶位置的功能,借助這個(gè)特性能夠開發(fā)基于位置信息的應(yīng)用。今天這篇文章向大家介紹一下 HTML5 地理位置定位的基本原理及各個(gè)瀏覽器的數(shù)據(jù)精度情況。

地理位置(Geolocation)是 HTML5 的重要特性之一,提供了確定用戶位置的功能,借助這個(gè)特性能夠開發(fā)基于位置信息的應(yīng)用。今天這篇文章向大家介紹一下 HTML5 地理位置定位的基本原理及各個(gè)瀏覽器的數(shù)據(jù)精度情況。

在訪問位置信息前,瀏覽器都會詢問用戶是否共享其位置信息,以 Chrome 瀏覽器為例,如果您允許 Chrome 瀏覽器與網(wǎng)站共享您的位置,Chrome 瀏覽器會向 Google 位置服務(wù)發(fā)送本地網(wǎng)絡(luò)信息,估計(jì)您所在的位置。然后,瀏覽器會與請求使用您位置的網(wǎng)站共享您的位置。

HTML5 Geolocation API 使用非常簡單,基本調(diào)用方式如下:

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

locationError為獲取位置信息失敗的回調(diào)函數(shù),可以根據(jù)錯(cuò)誤類型提示信息:

  1. locationError: function(error){  
  2.     switch(error.code) {  
  3.         case error.TIMEOUT:  
  4.             showError("A timeout occured! Please try again!");  
  5.             break;  
  6.         case error.POSITION_UNAVAILABLE:  
  7.             showError('We can\'t detect your location. Sorry!');  
  8.             break;  
  9.         case error.PERMISSION_DENIED:  
  10.             showError('Please allow geolocation access for this to work.');  
  11.             break;  
  12.         case error.UNKNOWN_ERROR:  
  13.             showError('An unknown error occured!');  
  14.             break;  
  15.     }  

locationSuccess為獲取位置信息成功的回調(diào)函數(shù),返回的數(shù)據(jù)中包含經(jīng)緯度等信息,結(jié)合Google Map API 即可在地圖中顯示當(dāng)前用戶的位置信息,如下:

  1. locationSuccess: function(position){  
  2.     var coords = position.coords;       
  3.     var latlng = new google.maps.LatLng(  
  4.         // 維度  
  5.         coords.latitude,  
  6.         // 精度  
  7.         coords.longitude  
  8.     );     
  9.     var myOptions = {     
  10.         // 地圖放大倍數(shù)     
  11.         zoom: 12,     
  12.         // 地圖中心設(shè)為指定坐標(biāo)點(diǎn)     
  13.         center: latlng,     
  14.         // 地圖類型     
  15.         mapTypeId: google.maps.MapTypeId.ROADMAP     
  16.     };     
  17.     // 創(chuàng)建地圖并輸出到頁面     
  18.     var myMap = new google.maps.Map(     
  19.         document.getElementById("map"),myOptions     
  20.     );     
  21.     // 創(chuàng)建標(biāo)記     
  22.     var marker = new google.maps.Marker({     
  23.         // 標(biāo)注指定的經(jīng)緯度坐標(biāo)點(diǎn)     
  24.         position: latlng,     
  25.         // 指定用于標(biāo)注的地圖     
  26.         map: myMap  
  27.     });  
  28.     //創(chuàng)建標(biāo)注窗口     
  29.     var infowindow = new google.maps.InfoWindow({     
  30.         content:"您在這里<br/>緯度:"+     
  31.             coords.latitude+     
  32.             "<br/>經(jīng)度:"+coords.longitude     
  33.     });     
  34.     //打開標(biāo)注窗口     
  35.     infowindow.open(myMap,marker);    

經(jīng)過測試,Chrome/Firefox/Safari/Opera四個(gè)瀏覽器獲取到的位置信息都是一摸一樣的,估計(jì)都是用的同一個(gè)位置服務(wù),數(shù)據(jù)如下:

而IE瀏覽器的和上面幾款瀏覽器獲取到的數(shù)據(jù)不一樣,數(shù)據(jù)如下:

位置服務(wù)用于估計(jì)您所在位置的本地網(wǎng)絡(luò)信息包括:有關(guān)可見 WiFi 接入點(diǎn)的信息(包括信號強(qiáng)度)、有關(guān)您本地路由器的信息、您計(jì)算機(jī)的 IP 地址。位置服務(wù)的準(zhǔn)確度和覆蓋范圍因位置不同而異。

總的來說,在PC的瀏覽器中 HTML5 的地理位置功能獲取的位置精度不夠高,如果借助這個(gè) HTML5 特性做一個(gè)城市天氣預(yù)報(bào)是綽綽有余,但如果是做一個(gè)地圖應(yīng)用,那誤差還是太大了。不過,如果是移動設(shè)備上的 HTML5 應(yīng)用,可以通過設(shè)置 enableHighAcuracy 參數(shù)為 true,調(diào)用設(shè)備的 GPS 定位來獲取高精度的地理位置信息。

原文鏈接:http://www.cnblogs.com/lhb25/archive/2012/07/10/html5-geolocation-api-demo.html

責(zé)任編輯:林師授 來源: 博客園
相關(guān)推薦

2012-09-04 10:15:00

IBMdw

2012-02-14 16:51:07

HTML 5

2012-05-23 13:00:37

HTML5

2013-03-22 08:59:57

HTML5移動應(yīng)用Web App

2013-01-24 10:26:04

HTML5HTML 5HTML5的未來

2015-11-19 09:44:34

HTML5定位

2013-10-21 15:24:49

html5游戲

2011-05-13 17:36:05

HTML

2011-05-11 12:59:18

HTML5

2011-05-13 17:41:40

2023-03-16 09:00:00

HTML5HTML語言

2011-01-14 17:53:33

HTML5cssweb

2017-01-03 18:09:33

HTML5本地存儲Web

2011-05-12 15:42:16

HTML5

2014-12-30 17:13:51

HTML5

2011-11-28 13:15:25

HTML5移動應(yīng)用

2013-08-08 10:00:01

Amazon AppsHTML5

2012-06-20 15:21:11

HTML5Opera歐朋瀏覽器

2012-06-27 17:17:55

HTML5

2012-11-30 10:42:00

IBMdW
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號