解析HTML5 geolocation的實例教程-H5教程-PHP中文網

首頁

web前端

H5教程

解析HTML5 geolocation的實例教程

零下一度

May 26, 2017 pm 04:02 PM

測試demo的github位址: github.com/lily1010/html5_geolocation

HTML5 Geolocation API 用於取得使用者的地理位置。鑑於該特性可能侵犯用戶的隱私，除非用戶同意，否則用戶位置資訊是不可用的。

一基於瀏覽器的HTML5查找地理位置

html5中的GPS定位功能封裝在navigator.geolocation 屬性裡,有三種方法:

(1) getCurrentPosition 只取得一次使用者的位置

(2) watchPosition 回到使用者目前的位置，並繼續回到使用者移動時的更新位置（就像汽車上的GPS）。

(3) clearWatch() - 停止watchPosition() 方法

二getCurrentPosition和 watchPosition方法使用格式為

#getCurrentPosition(successCallback,errorCallback, positionOptions)和watchPosition(successCallback,errorCallback,positionOptions)

(1)successCallback表示呼叫函數成功以後的回呼函數，該函數帶有一個參數，物件字面量格式，表示獲取到的用戶位置數據。

HTML5 geolocation0

(2)errorCallback表示傳回的錯誤代碼。它包含以下兩個屬性：

1、message：错误信息
2、 code：错误代码。

其中code错误代码包括以下四个值：
1 位置服务被拒绝
2 暂时获取不到位置信息
3 获取信息超时
4 未知错误

(3)positionOptions資料格式為JSON，有三個可選的屬性：

1、enableHighAcuracy — 布尔值： 表示是否启用高精确度模式，如果启用这种模式，浏览器在获取位置信息时可能需要耗费更多的时间。
2、timeout — 整数： 表示浏览需要在指定的时间内获取位置信息，否则触发errorCallback。
3、maximumAge — 整数/常量： 表示浏览器重新获取位置信息的时间间隔。

下面來看測試範例: (注意要開啟定位後才可以看效果)

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8"/>  
    <title>基于浏览器的HTML5查找地理位置</title> 
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 
  <script>
  var options={
       enableHighAccuracy:true,   //高精度定位参数
       maximumAge:1000
   }
   function getLocation(){
       if(navigator.geolocation){
           //浏览器支持geolocation
           navigator.geolocation.getCurrentPosition(onSuccess,onError,options);  //getCurrentPosition 只获取一次用户的地理位置函数
           //onSuccess成功返回的回调函数(必选),onError失败返回的回调函数(可选),设置精确度等参数(可选options)
           
           //navigator.geolocation.watchPosition(onSuccess,onError,options);  //watchPosition 继续获取用户的位置,适合于导航
           //onSuccess成功返回的回调函数(必选),onError失败返回的回调函数(可选),设置精确度等参数(可选options)
       }else{
           //浏览器不支持geolocation
           alert (&#39;您的浏览器暂不支持定位&#39;);
       }
   }
   //成功时
   function onSuccess(position){
     //返回用户位置
     //经度
     var longitude =position.coords.longitude;
     
     //纬度
     var latitude = position.coords.latitude;
     
     //精确度
     var accuracy = position.coords.accuracy;
     
     //高度精确度
     var altitudeAccuracy = position.coords.altitudeAccuracy;
     
     //设备正北顺时针前进的方位
     var heading = position.coords.heading;
     
     //设备外部环境的移动速度(m/s)
     var speed = position.coords.speed;
     
     //当位置捕获到时的时间戳
     var timestamp = position.timestamp;
     
     document.getElementById("container").innerHTML= "您的经度是="+longitude+&#39;<br>&#39;
     +"您的纬度是="+latitude+&#39;<br>&#39;+"您的精确度是="+accuracy+&#39;<br>&#39;
     +"您的高度精确度是="+altitudeAccuracy+&#39;<br>&#39;+"您的设备正北顺时针前进的方位是="+heading+&#39;<br>&#39;
     +"您的设备外部环境的移动速度(m/s)是="+speed+&#39;<br>&#39;+"您的当位置捕获到时的时间戳是="+timestamp+&#39;<br>&#39;;
   }
   //失败时
   function onError(error){
     switch(error.code){
       case 1:alert("位置服务被拒绝");break;
       case 2:alert("暂时获取不到位置信息");break;
       case 3:alert("获取信息超时");break;
       case 4:alert("未知错误");break;
     }
   }
   window.onload=getLocation;
   </script>
</head>
<body>
   <p id="container" style="300px;height: 300px"></p>
</body>
</html>

上面代碼最好用手機測試,因為谷歌瀏覽器因為被國內封的緣故,定位嘛,你們懂得

二 HTML5 geolocation呼叫百度地圖api

百度地圖的手冊位址: developer.baidu.com/map/jsdemo-mobile.htm#i7_1

事先說明,html5不是精確定位,所以在地圖上查看效果時總有幾百公尺的誤差

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8"/>  
    <title>基于浏览器的HTML5查找地理位置和调取百度地图api</title> 
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <!-- 百度API -->
         <script src="http://api.map.baidu.com/api?v=1.2" type="text/javascript"></script>  
  <script>
   var options={
       enableHighAccuracy:true,   //高精度定位参数
       maximumAge:1000
   }
   function getLocation(){
       if(navigator.geolocation){
           //浏览器支持geolocation
           navigator.geolocation.getCurrentPosition(onSuccess,onError,options);  //getCurrentPosition 只获取一次用户的地理位置函数
           //onSuccess成功返回的回调函数(必选),onError失败返回的回调函数(可选),设置精确度等参数(可选options)
           
           //navigator.geolocation.watchPosition(onSuccess,onError,options);  //watchPosition 继续获取用户的位置,适合于导航
           //onSuccess成功返回的回调函数(必选),onError失败返回的回调函数(可选),设置精确度等参数(可选options)
       }else{
           //浏览器不支持geolocation
           alert (&#39;您的浏览器暂不支持定位&#39;);
       }
   }
   //成功时
   function onSuccess(position){
     //返回用户位置
     //经度
     var longitude =position.coords.longitude;
     //纬度
     var latitude = position.coords.latitude;
     //使用百度地图API
     //创建地图实例  
     var map =new BMap.Map("container");
     //创建一个坐标
     var point =new BMap.Point(longitude,latitude);
     //地图初始化，设置中心点坐标和地图级别  
     map.centerAndZoom(point,15);
     map.addOverlay(new BMap.Marker(point)); //在地图上你的位置显示红色点点
   }
   //失败时
   function onError(error){
     switch(error.code){
       case 1:alert("位置服务被拒绝");break;
       case 2:alert("暂时获取不到位置信息");break;
       case 3:alert("获取信息超时");break;
       case 4:alert("未知错误");break;
     }
   }
   window.onload=getLocation;
   </script>
</head>
<body>
   <p id="container" style="300px;height: 300px"></p>
</body>
</html>

上面程式碼已經在手機上測試通過了,誤差有點大,還是不適合精確定位,定位到城市還是不錯的

【相關推薦】

1. 免費h5線上影片教學

#2. HTML5-Geolocation APIs的範例程式碼

#3 . html5 navigator.geolocation基於瀏覽器取得地理位置程式碼案例

4. html5指南（4）-使用Geolocation的詳解

#5 . 詳解Html5 Geolocation取得地理位置資訊的範例程式碼分享

#6. HTML5的Geolocation地理位置定位API使用方法詳解

#7. HTML5地理位置定位Geolocation-API及Haversine地理空間距離演算法（圖文）

以上是解析HTML5 geolocation的實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

H5和HTML5：網絡開發中常用的術語Apr 13, 2025 am 12:01 AM

H5與HTML5指的是同一個東西，即HTML5。 HTML5是HTML的第五個版本，帶來了語義化標籤、多媒體支持、畫布與圖形、離線存儲與本地存儲等新功能，提升了網頁的表現力和交互性。

H5指的是什麼？探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5：工具，框架和最佳實踐Apr 11, 2025 am 12:11 AM

H5開發需要掌握的工具和框架包括Vue.js、React和Webpack。 1.Vue.js適用於構建用戶界面，支持組件化開發。 2.React通過虛擬DOM優化頁面渲染，適合複雜應用。 3.Webpack用於模塊打包，優化資源加載。

HTML5的遺產：當前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee

H5代碼：可訪問性和語義HTMLApr 09, 2025 am 12:05 AM

H5通過語義化元素和ARIA屬性提升網頁的可訪問性和SEO效果。 1.使用、、等元素組織內容結構，提高SEO。 2.ARIA屬性如aria-label增強可訪問性，輔助技術用戶可順利使用網頁。

H5與HTML5相同嗎？Apr 08, 2025 am 12:16 AM

"h5"和"HTML5"在大多數情況下是相同的，但它們在某些特定場景下可能有不同的含義。 1."HTML5"是W3C定義的標準，包含新標籤和API。 2."h5"通常是HTML5的簡稱，但在移動開發中可能指基於HTML5的框架。理解這些區別有助於在項目中準確使用這些術語。

H5的功能是什麼？Apr 07, 2025 am 12:10 AM

H5，即HTML5，是HTML的第五個版本，它為開發者提供了更強大的工具集，使得創建複雜的網頁應用變得更加簡單。 H5的核心功能包括：1）元素允許在網頁上繪製圖形和動畫；2）語義化標籤如、等，使網頁結構清晰，利於SEO優化；3）新API如GeolocationAPI，支持基於位置的服務；4）跨瀏覽器兼容性需要通過兼容性測試和Polyfill庫來確保。