怎么在html5中使用Geolocation实现一个定位功能-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

怎么在html5中使用Geolocation实现一个定位功能

今天就跟大家聊聊有关怎么在html5中使用Geolocation实现一个定位功能,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

创新互联致力于互联网网站建设与网站营销,提供网站建设、成都网站制作、网站开发、seo优化、网站排名、互联网营销、重庆小程序开发、公众号商城、等建站开发,创新互联网站建设策划专家,为不同类型的客户提供良好的互联网应用定制解决方案,帮助客户在新的全球化互联网环境中保持优势。


1.获取当前位置
我们将使用getCurrentPosition方法获取当前位置,位置信息不会以结果的形式直接返回,我们需要使用callback函数进行处理。在获取坐标的过程中会有些延迟,还会问你要访问权限。我们来看下面的例子:

代码如下:

 
 
 
Example 
 
 
 
 
 
Longitude: 
- 
Latitude: 
- 
 
 
Altitude: 
- 
Accuracy: 
- 
 
 
Altitude Accuracy: 
- 
Heading: 
- 
 
 
Speed: 
- 
Time Stamp: 
- 
 
 
 
 


返回的position对象包含两个属性,coords:返回坐标信息;timestamp:获取坐标信息的时间。其中coords又包括下面属性:latitude:纬度;longitude:经度;altitude:高度;accuracy:精确度(米);altitudeAccuracy:高度精确度(米);heading:行进方向;speed:行进速度(米/秒)。
并不是所有的信息都会返回,这取决于你承载浏览器的设备。像有GPS、加速器、罗盘的移动设备会返回大部分信息,家用电脑就不行了。家用电脑获取的位置信息,取决于所处的网络环境或者是wifi。下面我们看上例的运行结果。

怎么在html5中使用Geolocation实现一个定位功能


点击允许,获取坐标信息。

怎么在html5中使用Geolocation实现一个定位功能

2.处理异常
现在我们介绍getCurrentPosition的异常处理,他是通过使用errorCallback回调函数实现的。函数返回的参数error包含两个属性,code:错误类型的代码;message:错误信息。code包含三个值:1:用户没有授权使用geolocation;2:无法获取坐标信息;3:获取信息超时。
下面我们看个例子:

代码如下:





Example


































Longitude:-Latitude:-
Altitude:-Accuracy:-
Altitude Accuracy:-Heading:-
Speed:-Time Stamp:-
Error Code:-Error Message:-




拒绝授权,运行结果:

怎么在html5中使用Geolocation实现一个定位功能

3.使用geolocation可选参数项
getCurrentPosition(callback,errorCallback,options)中的options有如下参数可以使用,enableHighAccuracy:使用最好的效果;timeout:超时时间(毫秒);maximumAge:指定缓存时间(毫秒)。我们来下下面的例子:

代码如下:





Example


































Longitude:-Latitude:-
Altitude:-Accuracy:-
Altitude Accuracy:-Heading:-
Speed:-Time Stamp:-
Error Code:-Error Message:-




4.监视位置变化
下面我们介绍使用watchPosition方法实现位置变化的监视,他的使用方法和getCurrentPosition一样。我们来看例子:

代码如下:





Example


































Longitude:-Latitude:-
Altitude:-Accuracy:-
Altitude Accuracy:-Heading:-
Speed:-Time Stamp:-
Error Code:-Error Message:-




看完上述内容,你们对怎么在html5中使用Geolocation实现一个定位功能有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。


网页标题:怎么在html5中使用Geolocation实现一个定位功能
当前路径:http://kswsj.cn/article/ppdpcg.html

其他资讯