HTML5中Geolocation API有什么用

发布时间：2021-03-03 10:38:56 作者：清风
来源：亿速云阅读：206

本文将为大家详细介绍“HTML5中Geolocation API有什么用”，内容步骤清晰详细，细节处理妥当，而小编每天都会更新不同的知识点，希望这篇“HTML5中Geolocation API有什么用”能够给你意想不到的收获，请大家跟着小编的思路慢慢深入，具体内容如下，一起去收获新知识吧。

html是什么

html的全称为超文本标记语言，它是一种标记语言，包含了一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体，html文本是由html命令组成的描述性文本，html命令可以说明文字，图形、动画、声音、表格、链接等，主要和css+js配合使用并构建优雅的前端网页。

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中Geolocation API有什么用

(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 ('您的浏览器暂不支持定位');
       }
   }
   //成功时
   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+'<br>'
     +"您的纬度是="+latitude+'<br>'+"您的精确度是="+accuracy+'<br>'
     +"您的高度精确度是="+altitudeAccuracy+'<br>'+"您的设备正北顺时针前进的方位是="+heading+'<br>'
     +"您的设备外部环境的移动速度(m/s)是="+speed+'<br>'+"您的当位置捕获到时的时间戳是="+timestamp+'<br>';
   }
   //失败时
   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 ('您的浏览器暂不支持定位');
       }
   }
   //成功时
   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>

如果你能读到这里，小编希望你对“HTML5中Geolocation API有什么用”这一关键问题有了从实践层面最深刻的体会，具体使用情况还需要大家自己动手实践使用过才能领会，如果想阅读更多相关内容的文章，欢迎关注亿速云行业资讯频道！

HTML5中Geolocation API有什么用

html是什么

相关阅读