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 地理位置的更多相关文章

  1. 02.Web大前端时代之:HTML5+CSS3入门系列~H5结构元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素 可以理解为语义话标记,比如:以前这么写&l ...

  2. 03.Web大前端时代之:HTML5+CSS3入门系列~H5功能元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1.hgroup 对网页或区段(secti ...

  3. 05. Web大前端时代之:HTML5+CSS3入门系列~H5 多媒体系

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.引入 概述 音频文件或视频文件都可以看做是一个容器文 ...

  4. 08. Web大前端时代之:HTML5+CSS3入门系列~H5 Web存储

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

  5. Web大前端时代之:HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  6. 01.Web大前端时代之:HTML5+CSS3入门系列~初识HTML5

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 文档申明 <!--文档类型申明,html代表是ht ...

  7. 04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 一.input新增类型: 1.tel:输入类型用于应该包 ...

  8. 06. Web大前端时代之:HTML5+CSS3入门系列~HTML5 画布

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...

  9. 08. Web大前端时代之:HTML5+CSS3入门系列 ~ QQ空间时间轴

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 大前端系列,主要就是使用CSS3.0来实现,注释我已经打 ...

随机推荐

  1. EF中的开放式并发(EF基础系列--28)

    好久没更新EF这个系列了,现在又重新开始. 这次学习,开放式并发.首先拿出数据库脚本: 说明一下,这个数据库脚本是之前的章节中稍作修改的: USE [SchoolDB] GO /****** Obje ...

  2. 解读浮动闭合最佳方案:clearfix

    .clear{clear:both;height:0;overflow:hidden;} 上诉办法是在需要清除浮动的地方加个div.clear或者br.clear,我们知道这样能解决基本清浮动问题. ...

  3. ORACLE创建表空间、创建用户、更改用户默认表空间以及授权、查看权限

    Oracle创建用户.表空间.导入导出....命令 //创建临时表空间 create temporary tablespace ext_temptempfile 'D:\oracle\product\ ...

  4. Java日期的格式String类型GMT,GST换算成日期Date种类

    请尊重他人的劳动成果.转载请注明出处:Java日期格式化之将String类型的GMT,GST日期转换成Date类型 http://blog.csdn.net/fengyuzhengfan/articl ...

  5. 微信移动支付V3开发详细教程服务端采用.net mvc webapi(C#)

    转自:http://www.kwstu.com/ArticleView/netmvc_201511132050268716 最近开发手机app需要实现移动支付功能,由于考虑支付安全将微信支付生成签名写 ...

  6. Github上怎么修改别人的项目并且提交给原作者!图文并茂!

    Github上怎么修改别人的项目并且提交给原作者!图文并茂! 写这篇博客的初衷,是因为我的项目Only需要一些朋友一起参与进来,但是很多的Git都不是很熟练,其实版本控制这种东西没有什么难度的,只要稍 ...

  7. python初认识、基础数据类型以及 if 流程控制

    python初认识 CPU.内存.硬盘以及操作系统之间的关系 CPU:中央处理器,计算机的逻辑运算单元 硬盘:长期存储数据的地方,断电不会丢失 内存:位于CPU与硬盘之间,缓解高速CPU与低速硬盘之间 ...

  8. 【BZOJ1227】[SDOI2009]虔诚的墓主人(线段树)

    [BZOJ1227][SDOI2009]虔诚的墓主人(线段树) 题面 BZOJ 洛谷 题解 显然发现答案就是对于每一个空位置,考虑上下左右各有多少棵树,然后就是这四个方向上树的数量中选\(K\)棵出来 ...

  9. 洛谷 P1478 陶陶摘苹果(升级版)

    本萌新第一次发布题解,若有不严谨处请谅解. 我看了前面几位大佬的手笔,表示自己还是比较钟爱桶排序的.它非常简易直接,还省时间,尤其对于这类题目占用的的空间也很小. 我们看到题目下面的说明:xi< ...

  10. WebDriverAPI(2)

    操作浏览器窗口 被测网址http:http://www.baidu.com Java语言版本的API实例代码 String url = "http://www.baidu.com" ...