在线建站培训
您的位置: 魔客吧 网页制作 html5教程 查看内容

HTML5地理定位与第三方工具百度地图的应用

2017-7-12 18:21 | 发布者: moke | 栏目:html5教程

看到了很多技术大牛和相关博客,很少关于HTML5的地理定位的描述,不知道他们是不愿意提及还是使用的少的原因,我个人按一点点经验总结了两方面原因:
第一、服务商方面的原因,因为HTML5的定位是由google提供的,由于google将大陆封杀的原因,定位功能也不在支持,这是主要原因
第二、HTML5自带的地理定位,性能较差,相对于第三方工具---类似百度地图等,不是在一个层次上,在真正项目开发的时候,很少使用原生HTML5自带的地理定位,这是次要原因!

一、HTML5的新特性--地理定位
既然地理定位是HTML5的新特性,那么我们也是要学习和掌握相关的API和学会如何去使用地理定位的
先了解一下常识

一个新名词Geolocation:

用于获得当前浏览器所在的地理坐标,从而提供LBS(Location Based Service),如饿了吗送餐、滴滴打车、高德导航等软件都是使用LBS,包括如下数据:
经度: longitude
纬度: latitude
海拔高度: altitude
速度: speed

使用平台分为移动端和PC端:
(1)手机浏览器:
首先尝试使用内置GPS数据——精度以米为单位
  再则使用手机基站编号反向推导出对应的地理位置——定位精度以公里为单位
(2)PC浏览器:
通过电脑的IP地址反向查询——精度以公里为单位

正题:
那么我们到底怎么样从HTML5中获取定位信息呢?
首先,我们在浏览器中按F12打开console,输入window.navigator.geolocation看看定位信息!

我们看到定位信息上有主要三个方法,含义分别是:

1
2
3
getCurrentPosition:fn(succ,err) //获取当前定位数据,其中包含成功获取和获取失败的回调函数
watchPosition: fn   //监视定位数据
clearWatch: fn   //清除定位监视

既然这样我们就知道如何在HTML5文件中使用地理定位了,我们利用开发工具创建一个HTML文件,并创建一个按钮,当点击按钮的时候,后台显示定位信息!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html> 
<html
<head lang="en"魔客吧温馨提示:如果正在寻找登门户网站模板,那么到魔客吧的 门户网站模板 频道看看吧,这里有很多的门户网站模板哦!

最新分享资源

最新评论

验证码 换一个