07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html

定位类型

IP 定位

优点

任何位置都可用

在服务器端处理

缺点

不精确,一般精确到城市

运算代价大,可能出错

代理的时候就可能定位出错了

GPS定位

优点

定位精准

缺点

定位时间长,耗电量大

室内效果不好

需要硬件设备支持

Wi-Fi定位

优点

定位精准

简单快捷定位

可以在室内使用

缺点

适合大城市,WIFI接入点少的地方效果差

手机定位

优点

定位精准

简单快捷定位

可以在室内使用

缺点

在基站较少的偏远地区效果不好

自定义定位

编程计算位置

用户自定义输入

兼容检测

navigator.geolocation

<script type="text/javascript">

if (window.navigator.geolocation) {

alert('支持H5 Geolocation');

} else {

alert('不支持H5 Geolocation');

}

</script>

地理定位

navigator.geolocation.getCurrentPosition(successFun,errorFun,Options)

参数概述

successFun

成功回调函数

eg:function(position){

//内容

}

参数

position.coords

coords.longitude

经度

十进制数

coords.latitude

纬度

十进制数

coords.accuracy

获取到的纬度或精度的位置精度

单位:米

coords.altitude

海拔,海平面以上以米计

coords.altitudeAccuracy

位置的海拔精度

单位:米

coords.heading

方向,从正北开始以度计

coords.speed

速度,以米/每秒计

timestamp

响应的日期/时间

errorFun

失败回调函数

eg:function(error){

//内容

}

参数

error.code

1

位置信息服务被拒绝

2

获取不到位置信息

3

获取信息超时

message

详细错误信息

很多都是英文提示。。。

验证

Options

可选参数

1秒钟=1000毫秒

1分钟=60000毫秒

timeout

对地理位置设置一个超时限制

单位:毫秒

maximumAge

缓存有效时间

单位:毫秒

enableHighAccuracy

高精度定位

一般不使用它

定位案例

完整案例

<div id="xyMsg"></div>

<script type="text/javascript">

if (window.navigator.geolocation) {

//定位

navigator.geolocation.getCurrentPosition(function (position) {

//成功回调函数

var cords = position.coords;

$('#xyMsg').html('经度:' + cords.longitude + ' 纬度:' + cords.latitude);

}, function (error) {

//错误回调函数

var errorMsg = { 1: '位置服务被拒绝', 2: '获取不到位置信息', 3: '获取信息超时' };

alert(errorMsg[error.code] + ":" + error.message);

}, { timeout: 4000, maximumAge: 60 * 1000 * 2 });

} else {

alert('不支持H5 Geolocation');

}

</script>

注意点

js数组的下标从1开始

综合实战

百度地图定位

了解百度地图

http://developer.baidu.com/map/jsdemo.htm

http://lbsyun.baidu.com/index.php?title=webapi

体验:

http://dnt.dkill.net/DNT/HTML5/demo/map.html

定位的运用

体验:

http://dnt.dkill.net/DNT/HTML5/demo/position.html

第三方定位

推荐使用

http://developer.baidu.com/map/jsdemo.htm#i8_1

http://developer.baidu.com/map/jsdemo.htm#i8_2

http://developer.baidu.com/map/jsdemo.htm#i8_3

http://developer.baidu.com/map/jsdemo.htm#i8_4

体验:

http://dnt.dkill.net/DNT/HTML5/demo/baidumap.html

注意

坐标转换问题

http://developer.baidu.com/map/jsdemo.htm#a5_2

感触

自带的一些东西真的很弱,不如百度,高德等API来的方便

原文发布于微信公众号 - 我为Net狂(dotNetCrazy)

原文发表时间:2016-01-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏王清培的专栏

.NET应用架构设计—表模块模式与事务脚本模式的代码编写

要想正确的设计系统架构就必须能正确的搞懂每个架构模式的用意,而不是胡子眉毛一把抓。现在有一个现象是什么呢,项目的结构从表面上看是很不错,层分的很合理,其实对业务...

9400
来自专栏IMWeb前端团队

聊聊http/2

本文作者:IMWeb 九月 原文出处:IMWeb社区 未经同意,禁止转载 随着web的发展,http/1.x 已经很难满足现在的需求,Google 因...

23770
来自专栏Web 开发

找到宝了,用launchpad来安装Ubuntu比较新的软件

上周装了一个Errorboard.js,结果ubuntu官方源的nodejs版本太久了,里面有个依赖包怎么都装不了。Google之,发现原来有个https://...

14300
来自专栏牛客网

爱奇艺现场面试总结

一面: java内存模型:问面试官是jmm还是jvm,说是jvm,说了说分区 堆内存:说了堆内存划分和理由,各种内存的分配流程,各类回收算法。 项目:略 mys...

64470
来自专栏Golang语言社区

最新后端架构师技术图谱!附学习资料~

版权申明:内容来源网络,版权归原创者所有。除非无法确认,我们都会标明作者及出处,如有侵权烦请告知,我们会立即删除并表示歉意。谢谢。

15110
来自专栏玉树芝兰

如何用 Python 和 API 收集与分析网络数据?

本文以一款阿里云市场历史天气查询产品为例,为你逐步介绍如何用 Python 调用 API 收集、分析与可视化数据。希望你举一反三,轻松应对今后的 API 数据收...

33820
来自专栏嵌入式程序猿

不按标准引发的bug

我们曾经在初级和中级培训中给大家详细讲解了Modbus通讯的开发,并多次强调了一定要按照标准协议的要求编写Modbus驱动程序,可是现实中仍然有很多工程师不按照...

29780
来自专栏花叔的专栏

实践并解读最新的小程序码生成方式

花叔一看到这个新特性时就开始着手研究这特性怎么应用,经过一轮测试,终于有点成绩,来看看花叔的研究成果,希望对大家有用。

45160
来自专栏IMWeb前端团队

babel

原文http://jiangyuan.me/blog/2016/08/13/babel/

26290
来自专栏有趣的django

Django REST framework+Vue 打造生鲜超市(九) 十、购物车、订单管理和支付功能

十、购物车、订单管理和支付功能 10.1.添加商品到购物车 (1)trade/serializer.py # trade/serializer.py __au...

48650

扫码关注云+社区

领取腾讯云代金券