专栏首页逸鹏说道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.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),作者:毒逆天

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 03.移动先行之谁主沉浮----真机调试秀

    如果移动方向有任何问题请参考===> 异常处理汇总-移动系列(点) ? ? 如果没错请跳过解决错误的步骤 ? 先看一下服务是否开了。。。。。这边的确是在运行的,...

    逸鹏
  • Ubuntu16.04下的NetCore环境搭建

    跨平台系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#linux VSCode安装:http://www...

    逸鹏
  • Nokia 920板砖自救(理论上通用,升级Win10成板砖也可以用这个恢复)

    异常处理汇总 ~ 修正果带着你的Net飞奔吧! http://www.cnblogs.com/dunitian/p/4599258.html 个人博客:http...

    逸鹏
  • Java 正则表达式 StackOverflowError 问题及其优化

    正则可以看做一门 DSL,但它却应用极其广泛,可以轻松解决很多场景下的字符串匹配、筛选问题。同时呢有句老话: “ 如果你有一个问题,用正则表达式解决,那么你现在...

    用户1177713
  • Android自定义Lint实践2——改进原生Detector

    上篇博客《Android自定义Lint实践》中我们介绍了美团App如何使用自定义Lint进行代码检查。 在使用Lint的过程中,我们陆续又发现原生Lint的一些...

    美团技术团队
  • 树莓派人脸识别门禁系统图文教程

    前面发布了人脸识别门禁系统的系列视频教程,现在补上图文版,方便查看指令和代码,这篇文章也是对之前的文章的更新与完善。

    小雨编程
  • 拓客难?导流难?推广难?门店小程序来帮您!

    妹门店小程序,附近小程序,轻松导流附近五公里顾客,各种优惠券,用户快速到店体验,精美店铺展示,一键生成专属店铺微名片,特价项目推广,优惠券核销系统。

    用户1745481
  • WebService初步使用

    删掉bin中的class之后,出现cant find the main class,解决:执行clean project->clean

    ZONGLYN
  • Python第五周 学习笔记(2)

    py3study
  • 真实网站劫持案例分析

    1. 概述 上段时间一直忙于处理大会安全保障与应急,借助公司云悉情报平台,发现并处置几十起网站被劫持的情况。对黑客SEO技术颇有感觉。正好这段时间有时间,把以前...

    FB客服

扫码关注云+社区

领取腾讯云代金券