07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html
源码:https://github.com/dunitian/LoTHTML5/tree/master/LoTHTML5/4.HTML5定位
定位类型
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
可选参数
秒钟=1000毫秒
分钟=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来的方便
07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置的更多相关文章
- 02.Web大前端时代之:HTML5+CSS3入门系列~H5结构元素
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素 可以理解为语义话标记,比如:以前这么写&l ...
- 03.Web大前端时代之:HTML5+CSS3入门系列~H5功能元素
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1.hgroup 对网页或区段(secti ...
- 05. Web大前端时代之:HTML5+CSS3入门系列~H5 多媒体系
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.引入 概述 音频文件或视频文件都可以看做是一个容器文 ...
- 08. Web大前端时代之:HTML5+CSS3入门系列~H5 Web存储
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html
- Web大前端时代之:HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
- 01.Web大前端时代之:HTML5+CSS3入门系列~初识HTML5
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 文档申明 <!--文档类型申明,html代表是ht ...
- 04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 一.input新增类型: 1.tel:输入类型用于应该包 ...
- 06. Web大前端时代之:HTML5+CSS3入门系列~HTML5 画布
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...
- 08. Web大前端时代之:HTML5+CSS3入门系列 ~ QQ空间时间轴
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 大前端系列,主要就是使用CSS3.0来实现,注释我已经打 ...
随机推荐
- JS产生随机数的几个用法!
<script> function GetRandomNum(Min,Max) { var Range = Max - Min; var Rand = Math.random(); ret ...
- javascript的缓动效果
这部分对原先的缓动函数进行抽象化,并结合缓动公式进行强化.成品的效果非常惊人逆天.走过路过不要错过. 好了,打诨到此为止.普通的加速减速是难以让人满意的,为了实现弹簧等让人眼花缭乱的效果必须动用缓动公 ...
- mysql的sql_mode 模式修改 my.cnf
1. sql_mode模式 mysql数据库的中有一个环境变量sql_mode,定义了mysql应该支持的sql语法,数据校验等!我们可以通过以下方式查看当前数据库使用的sql_mode: mysql ...
- C# async await 学习笔记2
C# async await 学习笔记1(http://www.cnblogs.com/siso/p/3691059.html) 提到了ThreadId是一样的,突然想到在WinForm中,非UI线程 ...
- ajax 方法解密
1:GET访问 浏览器 认为 是等幂的就是 一个相同的URL 只有一个结果[相同是指 整个URL字符串完全匹配]所以 第二次访问的时候 如果 URL字符串没变化 浏览器是 直接拿出了第一次访问的结果 ...
- ListView滑动删除
本来准备在ListView的每个Item的布局上设置一个隐藏的Button,当滑动的时候显示.但是因为每次只要存在一个Button,发现每个Item上的Button相互间不好控制.所以决定继承List ...
- (转)C# WinForm中 获得当前鼠标所在控件 或 将窗体中鼠标所在控件名显示在窗体标题上
原文地址:http://www.cnblogs.com/08shiyan/archive/2011/04/14/2015758.html /********************** * 课题:将窗 ...
- 关于条件语句和 a && b
learn from javascript cookbook if (element == 'ab') array[index] = "**"; 该语句 等价于 if (eleme ...
- WIN10远程计算机不支持所需的FIPS安全级别解决
win10系统的电脑在远程xp系统或者其他系统的电脑时,提示错误,远程计算机可能不支持所需的FIPS安全级别,如果出现一以下2种错误,可以解决! 1 第一步:打开win10下的,控制面板 2 第二 ...
- 12、Bootstrap中文文档(其它插件分享)
给大家介绍一个前端框架让你从此写起前端代码与之先前相比如有神助般的效果拉就是Bootstrap. 本片导航: Bootstrap的下载 css样式的使用 JavaScript 效果的引用 其他前端插件 ...