用html设计一个时间距离查询,使用HTML5 Geolocation实现一个距离追踪器
HTML5 Geolocation(地理定位)用于定位用户的位置。那么如何实现一个距离追踪器呢?我的思路是这样的,前提是浏览器支持h5地理定位,在这个基础上,获取用户位置,更新用户位置,计算距离,显示到页面,这样就简单实现了一个距离追踪器,为了用户更清楚地看到当前位置,这里接入了百度地图API。
页面结构如下所示:
Your Location
您的浏览器不支持HTML5 Geolocation。
纬度:
经度:
准确度:
时间戳:
目前旅行距离:
旅行总距离:
判断浏览器是否支持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标签
总结
以上所述是小编给大家介绍的使用HTML5 Geolocation实现一个距离追踪器,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
用html设计一个时间距离查询,使用HTML5 Geolocation实现一个距离追踪器相关推荐
- python求一个时间点的前一个月和后一个月
python如何获取一个时间点的前一个月和后一个月,网上虽然有很多教程,但是本人感觉太杂了而且不太好用,研究一番之后决定提供一种方法和思路. #!/usr/bin/env python # -*- c ...
- 运用html画一个三角形,利用css或html5画出一个三角形的方法
利用css或html5画出一个三角形的方法 发布时间:2020-09-14 14:49:22 来源:亿速云 阅读:83 作者:小新 这篇文章主要介绍利用css或html5画出一个三角形的方法,文中介绍 ...
- mysql从一个表中查询数据插入到另一个表中
1.插入全部数据 insert into table1 select * from table2; 2.插入指定字段值 insert into table1(field1) select field1 ...
- 用一个Sql语句查询出表中的一个字段的数据类型
select name,(select name from systypes where xusertype=syscolumns.xusertype) from syscolumns where i ...
- SuperMap iClient for Leaflet实现拖动半径进行距离查询
作者:lly 我们今天来聊一聊怎样通过iClient for Leaflet实现鼠标拖动进行距离查询.先来看一看是什么效果: 说明 本文使用的数据为iserver自带的范例数据长春市区图:查询的圆点是 ...
- 源码学习之LAMMPS的一个时间步是如何工作的
从本推文开始将开始学习LAMMPS的源码.这部分我也不太了解,所以一边学一边分享.学习源码的最好方法当然后阅读手册的PROGRAMMER GUIDE.为了督促自己学习,我首先将PROGRAMMER G ...
- mysql复杂查询示例_找到时间和内存复杂性之间的平衡-一个示例
mysql复杂查询示例 by Anmol Uppal 通过Anmol Uppal 找到时间和内存复杂性之间的平衡-一个示例 (Finding the balance between time and ...
- 如何设计一个通用的查询接口
临近放假,手头的事情没那么多,老是摸鱼也不好,还是写写博客吧. 今天来聊聊:如何设计一个通用的查询接口. 从一个场景开始 首先,我们从一个简单的场景开始.现在,我需要一个订单列表,用来查询[我的订单] ...
- 实例:输入一个时间值s,它是距离当日午夜的秒值,计算目前的时间,时间按00:00:00格式输出
实例:输入一个时间值s,它是距离当日午夜的秒值,计算目前的时间,时间按00:00:00格式输出 代码如下: # 计算时间的程序 s = int(input("请输入秒值:")) # ...
最新文章
- eclipse--各类型版本包含插件比较
- docker mysql 容器无故停止的原因
- c++-内存管理-bitmap_alloctor
- POJ 1751 Highways (kruskal)
- libevent 编程疑难解答
- Ffmpeg常用转码命令
- wireshark之npcap-1.50及以上版本在winserver2008-r2-sp1和win7上的问题
- 备战BAT面试-死磕mysql|mysql 是如何做到存储两千万数据毫无压力的?
- 生存智慧——新的生活方式
- TP-LINK无线路由器配置解读
- 39-程序中的三国天下
- 港科夜闻|香港科大商学院院长谭嘉因:金融业仍渴才,商科生疫情下有优势...
- 怎么在php中加入换行符,如何在PHP中创建换行符?
- DRG-分组器WEB版,手机版,可以在线动态获取分组,无需安装
- BookshelfB
- 向量几何在游戏编程中的使用
- 玩骰子(概率,暴力)
- 知识图谱存储与查询:自然语言记忆模块(NLM)
- MySQL的 SSL 连接配置
- 名帖143 行书《兰亭八柱帖》第一册:虞世南摹兰亭序
热门文章
- 2022电大国家开放大学网上形考任务-人力资源管理非免费(非答案)
- python3大神器_Python三大神器之pip的安装
- Python爬虫神器pyppeteer,对 js 加密降维打击
- 手机安装青龙面板,低功耗,随时随地的薅羊毛(无需服务器)
- VBA按列名称或是按表格标题给EXCEL表格做排序
- 永洪BI携手华为云FusionInsight,让数据分析提效20倍
- uniapp 使用图表
- AbMole推荐:人源化单抗动物实验黄金指南 (上)
- 组合学:使用10个数字与52个字母生成1477万个不重复的4位串码V4衍生版本
- 9个Excel小技巧,提高你的数据分析效率