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. gentoo 安装

    加载完光驱后 1进行ping命令查看网络是否通畅 2设置硬盘的标识为GPT(主要用于64位且启动模式为UEFI,还有一个是MBR,主要用于32位且启动模式为bois) parted -a optima ...

  2. PHP搭建大文件切割分块上传功能

    背景 在网站开发中,文件上传是很常见的一个功能.相信很多人都会遇到这种情况,想传一个文件上去,然后网页提示"该文件过大".因为一般情况下,我们都需要对上传的文件大小做限制,防止出现 ...

  3. 初步了解nodejs

    什么是Node.js? 很多初学者并没有真正地理解Node.js到底是什么.nodejs.org网站中的描述也没有多大帮助. 首先要清楚Node不是一个Web服务器,这十分重要.它本身并不能做任何事情 ...

  4. 主成分分析（PCA）原理总结

    主成分分析(Principal components analysis,以下简称PCA)是最重要的降维方法之一.在数据压缩消除冗余和数据噪音消除等领域都有广泛的应用.一般我们提到降维最容易想到的算法就 ...

  5. Linux学习之文件操作

    Linux,一起学习进步-    mkdir The mkdir command is used to create directories.It works like this: mkdir命令是用 ...

  6. C#中如何给Excel添加水印

    我们知道Microsoft Excel并没有内置的功能直接给Excel表添加水印,但是其实我们可以用其他变通的方式来解决此问题,如通过添加页眉图片或艺术字的方法来模仿水印的外观.所以在这篇文章中,我将 ...

  7. RabbitMq应用一

    RabbitMq应用一 RabbitMQ的具体概念,百度百科一下,我这里说一下我的理解,如果有少或者不对的地方,欢迎纠正和补充. 一个项目架构,小的时候,一般都是传统的单一网站系统,或者项目,三层架构 ...

  8. Android实现TCP断点上传，后台C#服务实现接收

    终端实现大文件上传一直都是比较难的技术,其中涉及到后端与前端的交互,稳定性和流量大小,而且实现原理每个人都有自己的想法,后端主流用的比较多的是Http来实现,因为大多实现过断点下载.但稳定性不能保证, ...

  9. 【干货分享】流程DEMO-补打卡

    流程名: 补打卡申请 业务描述: 当员工在该出勤的工作日出勤但漏打卡时,于一周内填写补打卡申请. 流程相关文件: 流程包.xml 流程说明: 直接导入流程包文件,即可使用本流程 表单:  流程: 图片 ...

  10. Android 算法 关于递归和二分法的小算法

     // 1. 实现一个函数,在一个有序整型数组中二分查找出指定的值,找到则返回该值的位置,找不到返回 -1. package demo; public class Mytest { public st ...