07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置-阿里云开发者社区

开发者社区> 毒逆天> 正文

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.getCurrentPositionsuccessFun,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来的方便

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
MySQL---数据库从入门走向大神系列(十七)-JavaWeb分页技术实例演示2
分页,是一种将所有数据分段展示给用户的技术.用户每次看到的不 是全部数据,而是其中的一部分,如果在其中没有找到自己想要的内容,用户可以通过指定页码或是点上/下一页的方式进行翻页。 本例演示静态分页,也就是先设置好每页显示10行,再根据总行数,来算出总页数,并且只显示10个页码。
1102 0
《HTML5+CSS3网页设计入门必读》——导读
网页设计是基于标准的。虽然“real fonts”或CSS3也对网页设计产生了深远的影响,但HTML的影响是其他方面所无法比拟的。HTML是开发人员对W3C步调和政策不满的结果,它是为网页应用程序(而不仅仅是文件)而设计的,因此,虽然这个新版本的网络语言令网页设计界为之兴奋,但也导致了同等程度的愤怒
1669 0
4982亿背后的前端技术—2020天猫双11前端体系大揭秘
与大家分享淘系前端在今年双11的思考和沉淀,希望对大家有所助益。
1172 0
+关注
毒逆天
目前不太用云栖, 博客园地址:http://dunitian.cnblogs.com;GitHub地址:https://github.com/dunitian
368
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载