HTML地理定位-yiteyi-C++库

在本文中，我们将了解 HTML地理定位 ，各种属性、方法及其实现。

null

地理位置 在HTML5中，它用于与一些网站共享位置，并知道确切的位置。它主要用于当地企业、餐馆或在地图上显示位置。它使用JavaScript为后端服务器提供纬度和经度。大多数浏览器都支持地理定位API。地理位置API使用全局导航器对象，可按如下方式创建：

语法：

var loc = navigator.geolocation

位置属性： 下表确定getCurrentPosition（）中使用的属性及其返回值。

库兹。纬度： 始终以十进制数返回纬度。
库兹。准确度： 始终返回位置的准确性。
库兹。经度 : 始终以十进制数返回经度。
库兹。海拔高度： 返回海拔高度（如果可用）。
库兹。高度准确度： 返回位置的高度精度（如果可用）。
库兹。标题： 从北顺时针方向返回航向（如果可用）
库兹。速度： 以mps为单位返回速度（如果可用）。
时间戳： 返回响应的日期或时间（如果可用）

地理定位方法： 地理定位有以下几种方法，使其有趣且更易于操作。

getCurrentPosition（）： 它获取用户的当前位置。
watchPosition（）： 它会定期获取用户当前位置的更新。
clearWatch（）： 它取消当前正在执行的watchPosition调用。

例子： 本例说明如何使用getCurrentPosition（）方法返回用户的当前位置。

HTML

var loc = navigator.geolocation;

function getLoc() {

loc.getCurrentPosition(showLoc, errHand);

}

也可以在不创建navigator对象的情况下编写上述函数，如下所示：

HTML

function getlocation(){

navigator.geolocation.getCurrentPosition(showLoc, errHand);

}

例子： 在本例中，我们只是通过HTML Geolocation借助纬度和经度显示当前位置。

HTML

                         <!DOCTYPE html>                       
                         <                                     html                                     >                       
           
                         <                                     body                                     >                       
                                   
           
                         <                                     p                                     >Displaying location using Latitude and Longitude</                                     p                                     >                       
           
           
           
                                                 <                                     button                                     class                                     =                                     "geeks"                                     onclick                                     =                                     "getlocation()"                                     >                       
                                                 Click Me                       
                                                 </                                     button                                     >                       
                                                 <                                     p                                     id                                     =                                     "demo1"                                     ></                                     p                                     >                       
           
           
           
                                                 <                                     script                                     >                       
                                                 var variable1 = document.getElementById("demo1");                       
                                                 function getlocation() {                       
                                                 navigator.geolocation.getCurrentPosition(showLoc);                       
                                                 }                       
                                                 function showLoc(pos) {                       
                                                 variable1.innerHTML =                       
                                                 "Latitude: " +                       
                                                 pos.coords.latitude +                       
                                                 "<                                     br                                     >Longitude: " +                       
                                                 pos.coords.longitude;                       
                                                 }                       
                                                 </                                     script                                     >                       
                         </                                     body                                     >                       
           
                         </                                     html                                     >                       

输出：

使用纬度和经度获取当前位置

错误和拒绝处理： 处理地理定位中产生的错误并在错误发生时显示所需消息非常重要。getCurrentPosition（）等函数使用错误处理程序来处理生成的错误（上面示例中使用的函数errHand）。错误处理程序使用的PositionError对象有两个属性，可以让函数有效地处理错误。

密码
消息

地理定位中生成的错误：

错误	错误描述
未知错误	未知错误
拒绝许可	应用程序没有使用位置服务的权限
位置不可用	该设备的位置尚不确定
暂停	获取位置信息的时间超过了最大超时间隔

例子：

HTML

                         <!DOCTYPE html>                       
                         <                                     html                                     >                       
           
                         <                                     head                                     >                       
                                                 <                                     title                                     >Errors in geolocation</                                     title                                     >                       
                                                 <                                     style                                     >                       
                                                 .gfg {                       
                                                 font-size: 40px;                       
                                                 font-weight: bold;                       
                                                 color: #009900;                       
                                                 margin-left: 20px;                       
                                                 }                       
           
                                                 .geeks {                       
                                                 margin-left: 150px;                       
                                                 }                       
           
                                                 p {                       
                                                 font-size: 20px;                       
                                                 margin-left: 20px;                       
                                                 }                       
                                                 </                                     style                                     >                       
                         </                                     head                                     >                       
           
                         <                                     body                                     >                       
                                                 <                                     div                                     class                                     =                                     "gfg"                                     >GeeksforGeeks</                                     div                                     >                       
           
                                   
           
                         <                                     p                                     >Error handling in geolocation</                                     p                                     >                       
           
           
           
                                                 <                                     button                                     class                                     =                                     "geeks"                                     onclick                                     =                                     "getlocation()"                                     >                       
                                                 Click                       
                                                 </                                     button                                     >                       
                                                 <                                     p                                     id                                     =                                     "demo1"                                     ></                                     p                                     >                       
           
           
           
                                                 <                                     script                                     >                       
                                                 var variable1 = document.getElementById("demo1");                       
                                                 function getlocation() {                       
                                                 navigator.geolocation.getCurrentPosition(showLoc, errHand);                       
                                                 }                       
                                                 function showLoc(pos) {                       
                                                 variable1.innerHTML =                       
                                                 "Latitude: " +                       
                                                 pos.coords.latitude +                       
                                                 "<                                     br                                     >Longitude: " +                       
                                                 pos.coords.longitude;                       
                                                 }                       
           
                                                 function errHand(err) {                       
                                                 switch (err.code) {                       
                                                 case err.PERMISSION_DENIED:                       
                                                 variable1.innerHTML =                       
                                                 "The application doesn't have the" +                       
                                                 "permission to make use of location services";                       
                                                 break;                       
                                                 case err.POSITION_UNAVAILABLE:                       
                                                 variable1.innerHTML = "The location of the device is uncertain";                       
                                                 break;                       
                                                 case err.TIMEOUT:                       
                                                 variable1.innerHTML = "The request to get user location timed out";                       
                                                 break;                       
                                                 case err.UNKNOWN_ERROR:                       
                                                 variable1.innerHTML =                       
                                                 "Time to fetch location information exceeded" +                       
                                                 "the maximum timeout interval";                       
                                                 break;                       
                                                 }                       
                                                 }                       
                                                 </                                     script                                     >                       
                         </                                     body                                     >                       
           
                         </                                     html                                     >                       

输出：

地理定位中的错误处理

在地图中显示结果： 在地图上显示位置是一项非常有趣的任务。这些服务用于提供地图上的确切位置。

例子： 本例描述了通过HTML地理位置，借助经纬度在谷歌地图中获取当前位置。

HTML

                         <!DOCTYPE html>                       
                         <                                     html                                     >                       
           
                         <                                     head                                     >                       
                                                 <                                     title                                     >Display location in map</                                     title                                     >                       
                                                 <                                     style                                     >                       
                                                 .gfg {                       
                                                 font-size: 40px;                       
                                                 font-weight: bold;                       
                                                 color: #009900;                       
                                                 margin-left: 20px;                       
                                                 }                       
           
                                                 .geeks {                       
                                                 margin-left: 150px;                       
                                                 }                       
           
                                                 p {                       
                                                 font-size: 20px;                       
                                                 margin-left: 20px;                       
                                                 }                       
                                                 </                                     style                                     >                       
                         </                                     head                                     >                       
           
                         <                                     body                                     >                       
                                                 <                                     div                                     class                                     =                                     "gfg"                                     >GeeksforGeeks</                                     div                                     >                       
           
                                   
           
                         <                                     p                                     >Display location in map</                                     p                                     >                       
           
           
           
                                                 <                                     button                                     class                                     =                                     "geeks"                                     type                                     =                                     "button"                                     onclick                                     =                                     "getlocation();"                                     >                       
                                                 Current Position                       
                                                 </                                     button                                     >                       
                                                 <                                     div                                     id                                     =                                     "demo2"                       
                                                 style                                     =                                     "width: 500px; height: 500px"                                     ></                                     div                                     >                       
                                                 <                                     script                                     src                                     =                       
                         "                           https://maps.google.com/maps/api/js?sensor=false                          "                                     >                       
                                                 </                                     script                                     >                       
                                                 <                                     script                                     type                                     =                                     "text/javascript"                                     >                       
                                                 function getlocation() {                       
                                                 if (navigator.geolocation) {                       
                                                 navigator.geolocation.getCurrentPosition(showLoc, errHand);                       
                                                 }                       
                                                 }                       
                                                 function showLoc(pos) {                       
                                                 latt = pos.coords.latitude;                       
                                                 long = pos.coords.longitude;                       
                                                 var lattlong = new google.maps.LatLng(latt, long);                       
                                                 var OPTions = {                       
                                                 center: lattlong,                       
                                                 zoom: 10,                       
                                                 mapTypeControl: true,                       
                                                 navigationControlOptions: {                       
                                                 style: google.maps.NavigationControlStyle.SMALL,                       
                                                 },                       
                                                 };                       
                                                 var mapg = new google.maps.Map(                       
                                                 document.getElementById("demo2"),                       
                                                 OPTions                       
                                                 );                       
                                                 var markerg = new google.maps.Marker({                       
                                                 position: lattlong,                       
                                                 map: mapg,                       
                                                 title: "You are here!",                       
                                                 });                       
                                                 }                       
           
                                                 function errHand(err) {                       
                                                 switch (err.code) {                       
                                                 case err.PERMISSION_DENIED:                       
                                                 result.innerHTML =                       
                                                 "The application doesn't have the permission" +                       
                                                 "to make use of location services";                       
                                                 break;                       
                                                 case err.POSITION_UNAVAILABLE:                       
                                                 result.innerHTML = "The location of the device is uncertain";                       
                                                 break;                       
                                                 case err.TIMEOUT:                       
                                                 result.innerHTML = "The request to get user location timed out";                       
                                                 break;                       
                                                 case err.UNKNOWN_ERROR:                       
                                                 result.innerHTML =                       
                                                 "Time to fetch location information exceeded" +                       
                                                 "the maximum timeout interval";                       
                                                 break;                       
                                                 }                       
                                                 }                       
                                                 </                                     script                                     >                       
                         </                                     body                                     >                       
           
                         </                                     html                                     >                       

输出：

获取谷歌地图中的当前位置

支持的浏览器：

谷歌浏览器
微软边缘
火狐
歌剧
游猎

文章版权归作者所有，未经允许请勿转载。

THE END