使用HTML5 Geolocation实现一个距离追踪器


Posted in HTML / CSS onApril 09, 2018

HTML5 Geolocation(地理定位)用于定位用户的位置。那么如何实现一个距离追踪器呢?我的思路是这样的,前提是浏览器支持h5地理定位,在这个基础上,获取用户位置,更新用户位置,计算距离,显示到页面,这样就简单实现了一个距离追踪器,为了用户更清楚地看到当前位置,这里接入了百度地图API。

页面结构如下所示:

<div id="container">
 <section>
  <article>
   <header>
    <h1>Your Location</h1>
   </header>
   <p class="info" id="status">您的浏览器不支持HTML5 Geolocation。</p>
   <div class="geostatus">
    <p id="latitude">纬度:  </p>
    <p id="longitude">经度:  </p>
    <p id="accuracy">准确度:  </p>
    <p id="timestamp">时间戳:  </p>
    <p id="currDist">目前旅行距离:  </p>
    <p id="totalDist">旅行总距离:  </p>
   </div>
  </article>
 </section>
 <!-- 百度地图位置显示 -->
 <div id="allmap"></div>    
</div>

判断浏览器是否支持HTML5 Geolocation

在body加载时调用loadDemo()方法,方法根据navigator.geolocation来判断浏览器是否支持HTML5 Geolocation;如果navigator.geolocation为true,那么我们就可以开始对用户位置进行获取更新

实时获取用户位置

HTML5可以通过getCurrentPosition() 方法来获得用户的位置。但这个只获取一次,所以我们选用了 watchPosition()这个方法,它能返回用户的当前位置,并继续返回用户移动时的更新位置(就像汽车上的GPS)。

navigator.geolocation.watchPosition(updateLocation, handleLocationError, {
        timeout: 10000
       });

在不断获取位置的同时,调用updateLocation这个方法,把位置情况显示在页面上,当然还要调用计算距离的方法来获取距离,以及不断更新百度地图上的位置。

var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var accuracy = position.coords.accuracy;
var timestamp = position.timestamp;
document.getElementById("latitude").innerHTML = "纬度:  " + latitude;
document.getElementById("longitude").innerHTML = "经度:  " + longitude;
document.getElementById("accuracy").innerHTML = "准确度:  " + accuracy;
document.getElementById("timestamp").innerHTML = "时间戳:  " + timestamp;
if(accuracy >= 30000) {
 updateStatus("Need more accurate values to calculate distance.");
 return;
}
if((lastLat != null) && (lastLong != null)) {
 var currentDistance = distance(latitude, longitude, lastLat, lastLong);
 document.getElementById("currDist").innerHTML = "目前旅行距离:  " + currentDistance.toFixed(2) + "km";
 totalDistance += currentDistance;
 document.getElementById("totalDist").innerHTML = "旅行总距离:  " + currentDistance.toFixed(2) + "km";
 updateStatus("Location successfully updated.");
}
lastLat = latitude;
lastLong = longitude;

计算距离

把开始位置和当前位置的经度纬度作为参数放入函数,通过换算,来计算距离(单位为km)

Number.prototype.toRadians = function() {
    return this * Math.PI / 180;
   }
function distance(latitude1, longitude1, latitude2, longitude2) {
    var R = 6371;
    var deltaLatitude = (latitude2 - latitude1).toRadians();
    var deltaLongitude = (longitude2 - longitude1).toRadians();
    latitude1 = latitude1.toRadians(), latitude2 = latitude2.toRadians();
    var a = Math.sin(deltaLatitude / 2) * Math.sin(deltaLatitude / 2) + Math.cos(latitude1) * Math.cos(latitude2) * Math.sin(deltaLongitude / 2) * Math.sin(deltaLongitude / 2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    var d = R * c;
    return d;
   }

百度地图API接入

要用百度地图API,你需要注册百度账号,申请成为百度开发者然后获取一个密钥,才能使用相关服务戳这 根据文档你可以知道如何使用这个API 代码如下:

var map = new BMap.Map("allmap"); // 创建Map实例
 map.centerAndZoom(new BMap.Point(longitude, latitude), 14); //设置中心点坐标和地图级别
 map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
 map.setCurrentCity("南昌"); //显示城市,此项必须设置
 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
 // 以下为当前位置标注设置
 var point = new BMap.Point(longitude, latitude);
 map.centerAndZoom(point, 14);
 var marker = new BMap.Marker(point); //创建标注
 map.addOverlay(marker); //将标注添加到地图中
 marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
 // 百度地图API功能--------end

记得先引入一个script标签

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥" ></script>

总结

以上所述是小编给大家介绍的使用HTML5 Geolocation实现一个距离追踪器,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
详解CSS3伸缩布局盒模型Flex布局
Aug 20 HTML / CSS
CSS3用@font-face实现自定义英文字体
Sep 23 HTML / CSS
基于DOM+CSS3实现OrgChart组织结构图插件
Mar 02 HTML / CSS
使用CSS3设计地图上的雷达定位提示效果
Apr 05 HTML / CSS
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
Jan 06 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
Jan 05 HTML / CSS
使用HTML5 Canvas API中的clip()方法裁剪区域图像
Mar 25 HTML / CSS
基于HTML5的WebSocket的实例代码
Aug 15 HTML / CSS
Html5新增标签与样式及让元素水平垂直居中
Jul 11 HTML / CSS
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
Aug 24 HTML / CSS
HTML5 层的叠加的实现
Jul 07 HTML / CSS
前后端结合实现amazeUI分页效果
Aug 21 HTML / CSS
canvas线条的属性详解
Mar 27 #HTML / CSS
详解canvas绘图时遇到的跨域问题
Mar 22 #HTML / CSS
canvas 下载二维码和图片加水印的方法
Mar 21 #HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
Mar 21 #HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
Mar 21 #HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
Mar 20 #HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
Mar 20 #HTML / CSS
You might like
php生成excel文件的简单方法
2014/02/08 PHP
php打印输出棋盘的实现方法
2014/12/23 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
javascript+mapbar实现地图定位
2010/04/09 Javascript
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
jQuery的position()方法详解
2015/07/19 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
js实现5秒倒计时重新发送短信功能
2017/02/05 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
使用gulp搭建本地服务器并实现模拟ajax
2017/04/05 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
[53:20]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 VG vs OG
2018/04/03 DOTA
python的类变量和成员变量用法实例教程
2014/08/25 Python
Python爬取读者并制作成PDF
2015/03/10 Python
浅谈MySQL中的触发器
2015/05/05 Python
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
python实发邮件实例详解
2019/11/11 Python
python ubplot使用方法解析
2020/01/10 Python
Python cookie的保存与读取、SSL讲解
2020/02/17 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
Coltorti Boutique官网:来自意大利的设计师品牌买手店
2018/11/09 全球购物
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
德国、奥地利和瑞士最大的旅行和度假门户网站:HolidayCheck
2019/11/14 全球购物
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
淘宝客服专员岗位职责
2014/04/11 职场文书
推荐信格式范文
2014/05/09 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
致接力运动员加油稿
2015/07/21 职场文书
有关信念的名言语录集锦
2019/12/06 职场文书
分布式锁为什么要选择Zookeeper而不是Redis?看完这篇你就明白了
2021/05/21 Redis