Html5 Geolocation獲取地理位置信息教程

基于地理位置的應用越來越火,HTML5也提供了地理位置API了,下面我們就一起來看一個關于Html5 Geolocation獲取地理位置信息教程了,希望文章能夠幫助到各位朋友。

Html5中提供了地理位置信息的API,通過浏覽器來獲取用戶當前位置。基于此特性可以開發基于位置的服務應用。在獲取地理位置信息前,首先浏覽器都會向用戶詢問是否願意共享其位置信息,待用戶同意後才能使用。

Html5獲取地理位置信息是通過Geolocation API提供,使用其getCurrentPosition方法,此方法中有三個參數,分別是成功獲取到地理位置信息時所執行的回調函數,失敗時所執行的回調函數和可選屬性配置項。

如下Demo演示了通過Geolocation獲取地理位置信息,並在百度地圖上顯示當前位置(通過調用百度地圖API)。

代碼如下所示(其中convertor.js爲百度地圖提供的坐標轉化文件):

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>H5地理位置Demo</title>
5 <script src="http://api.map.baidu.com/api?v=1.3" type="text/javascript">
6 </script>
7 <script type="text/javascript" src="convertor.js">
8 </script>
9 </head>
10 <body>
11 <div id="map" style="width:600px; height:400px">
12 </div>
13 </body>
14 <script type="text/javascript">
15 if (window.navigator.geolocation) {
16 var options = {
17 enableHighAccuracy: true,
18 };
19 window.navigator.geolocation.getCurrentPosition(handleSuccess, handleError, options);
20 } else {
21 alert("浏覽器不支持html5來獲取地理位置信息");
22 }
23
24 function handleSuccess(position){
25 // 獲取到當前位置經緯度 本例中是chrome浏覽器取到的是google地圖中的經緯度
26 var lng = position.coords.longitude;
27 var lat = position.coords.latitude;
28 // 調用百度地圖api顯示
29 var map = new BMap.Map("map");
30 var ggPoint = new BMap.Point(lng, lat);
31 // 將google地圖中的經緯度轉化爲百度地圖的經緯度
32 BMap.Convertor.translate(ggPoint, 2, function(point){
33 var marker = new BMap.Marker(point);
34 map.addOverlay(marker);
35 map.centerAndZoom(point, 15);
36 });
37 }
38
39 function handleError(error){
40
41 }
42 </script>
43 </html

convertor.js文件:

1 (function() { // 閉包
2 function load_script(xyUrl, callback) {
3 var head = document.getElementsByTagName('head')[0];
4 var script = document.createElement('script');
5 script.type = 'text/javascript';
6 script.src = xyUrl;
7 // 借鑒了jQuery的script跨域方法
8 script.onload = script.onreadystatechange = function() {
9 if ((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) {
10 callback && callback();
11 // Handle memory leak in IE
12 script.onload = script.onreadystatechange = null;
13 if (head && script.parentNode) {
14 head.removeChild(script);
15 }
16 }
17 };
18 // Use insertBefore instead of appendChild to circumvent an IE6 bug.
19 head.insertBefore(script, head.firstChild);
20 }
21 function translate(point, type, callback) {
22 var callbackName = 'cbk_' + Math.round(Math.random() * 10000); // 隨機函數名
23 var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from=" + type
24 + "&to=4&x=" + point.lng + "&y=" + point.lat
25 + "&callback=BMap.Convertor." + callbackName;
26 // 動態創建script標簽
27 load_script(xyUrl);
28 BMap.Convertor[callbackName] = function(xyResult) {
29 delete BMap.Convertor[callbackName]; // 調用完需要刪除改函數
30 var point = new BMap.Point(xyResult.x, xyResult.y);
31 callback && callback(point);
32 }
33 }
34
35 window.BMap = window.BMap || {};
36 BMap.Convertor = {};
37 BMap.Convertor.translate = translate;
38 })();

獲取地理位置的方式及其優缺點:

1、ip地址
書上說不准確,很多時候獲取的是ISP機房的位置,但是獲取非常方便,沒有什麽限制。但是實際上我覺得在中國,ip地址還是比較准確的,基本上上能精確到小區或大樓的標准。
2、GPS
非常准確,但是需要在戶外,且需要很長時間搜索衛星。最主要的很多設備比如筆記本電腦基本都是不帶GPS的,新的智能手機倒是都有。
3、WiFi基站的mac地址。(猜測是連接位置已知的公共WiFi的時候,通過Mac地址識別WiFi接入點,從而定位)
這種定位的精度還是很不錯的,而且還可以在室內定位。不過由于這種位置公開的wifi比較少,此種方法的適用範圍比較少。
4、 GSM或CDMA基站
通過基站定位,精度隨基站密度變化,精度一般,還是只有手機能用。看來地理位置API還是手機上比較有實用性。
5、用戶指定位置
這個就不是HTML5的範疇了。

更多相關文章
  • 微信6.2.5版本理財通搖一搖活動獲取紅包教程
    微信6.2.5升級之後在理財通中會有一個搖一遙紅包的功能,那麽這搖一搖紅包的功能如何來使用呢,下面一聚教程小編就來爲各位介紹一下這個紅包的使用方法,希望這個例子能夠爲各位帶來幫助.1.我們先拿出自己的手機,然後點擊微信打開微信掃描下方二維碼,但我們需要自己理財200.2.好了這樣我們就進入到了活動頁
  • 提供一款jQuery操作Cookies 刪除 獲取 修改入門教程,因爲有了它不方便多了,有需要的朋友參考一下.使用傳統的Javascript來設置和獲取Cookies信息很麻煩,要寫上幾個函數來處理,幸運的是jQue
  • 下文給各位整理一篇關于wordpress獲取自定義post_type的分類例子,希望這個例子可以幫助到各位,雖然簡單但總會有一些作用的.在自己建立一種post-type的文件類型後,然後分類也是自己用register_taxonomy來自定義的.這個時候我在用 代碼如下 [php]<?php ...
  • 全境封鎖beta測試獲取及激活攻略
    想要提前預購<全境封鎖>的朋友即可獲得beta測試資格,下面爲大家帶來<全境封鎖>beta測試獲取及激活教程,並對全境封鎖beta測試的時間進行釋疑,下面各位玩家們就來一起看看吧.給各位全境封鎖的的玩家們來詳細的分享一下beta測試獲取及激活的方法.方法分享:BETA測試近在 ...
  • 下面我們一起來看看VB.NET 獲取磁盤信息程序示例,本示中我們會使用到三個函數,GetDriveType(),etVolumeInformation(),etDiskFreeSpace(),下面我們一起來看盾如何獲取磁盤信息吧.磁盤信息實例說明在本程序中,我們將生成一個能夠得到當前磁盤信息的應用程
  • 攝像頭我們如果沒有html5恐怕只能使用flash+as來實現了,小編以前就經常這樣做了,下文我們來看利用html5的api來實現.html5新增了很多強大的API,其中可以獲取設備的攝像頭視頻是個比較大的亮點,零度
  • 華爲C8816怎麽獲取root權限 華爲 C8816一鍵root權限教程
    華爲C8816手機非常的不錯了,但有一些軟件我們需要root權限才可以安裝了,下面一起來看
  • 本文我們來詳細的看看jq操作select的option的實例教程,其中有jq獲取select的option的所有value和text,jq對select option的添加刪除操作實例.工作需要把select對應下的
一周排行
  • ipad pro連接電腦沒反應怎麽來解決
    ipad pro連接電腦沒反應怎麽辦了,這個我們可以從幾個方法來嘗試解決了,如沒有安裝it
  • php數組排序對數組的元素鍵名進行升序排序並且保持索引關系,有需要的朋友可以參考一下.這次這個函數是ksort() 函數按照鍵名對數組升序排序,爲數組值保留原來的鍵.可選的第二個參數包含附加的排序標志.若成功,則返回
  • artDialog彈出層插件是一個基于jquery的插件非常的好用,今天看到小A.個人博客分享了這麽一篇文章,下面我整理一下給各位參考,同時也感謝站長. 代碼如下 <!DOCTYPE html><h ...
  • 下面來簡單的介紹在php中get_meta_tags().CURL與user-agent信息對比情況,如果你對于這篇文章有興趣可進入參考學習.get_meta_tags()函數用于抓取網頁中<meta name ...
  • CSS中比較height:100%和height:inherit的不同點
    本文我們來總結CSS中eight:100%和height:inherit的異同,主要表現在 ...
  • LLsMP安裝VSFTPD並爲網站單獨添加FTP賬戶
    LLsMP是Linux+Litespeed+MySQL+PHP簡稱了,下文來介紹在LLsM
  • 下文一聚教程小編來爲各位介紹關于Nginx寫IO占用高故障處理方法,下面是一個站長的實戰處理經驗分享,希望文章能夠幫助到各位朋友.故障現象 突然收到一台伺服器負載過高告警,緊接著網站打開緩慢. 故障分析 1.登錄伺服 ...
  • 在網上看了一下說linux內核系統是可以自動挂載NTFS分區了,但是小編測試了一篇之後會發現不能自動挂載NTFS分區了,那麽我們一起來看看如何解決這個問題.一種簡單的解決方法是使用開源軟件ntfs-3g使用下列命令安 ...
  • 對象類型轉換json數據有點像數組轉json有樣的了,在python中也有專門的函數來操作,下面我們來看一篇Python對象類型轉換json數據的例子吧.有時候,在Django的model中,直接查詢出來的orm對象
  • 怎麽啓動Oracle的OEM管理工具
    如何啓動Oracle的OEM管理工具呢,下面我們一起來看看吧,希望此教程對各位會有所幫助.