Your Location
您的浏览器不支持HTML5 Geolocation。
纬度:
经度:
准确度:
时间戳:
目前旅行距离:
旅行总距离:
摘要：那么如何实现一个距离追踪器呢我的思路是这样的，前提是浏览器支持地理定位，在这个基础上，获取用户位置，更新用户位置，计算距离，显示到页面，这样就简单实现了一个距离追踪器，为了用户更清楚地看到当前位置，这里接入了百度地图。
HTML5 Geolocation（地理定位）用于定位用户的位置。那么如何实现一个距离追踪器呢？我的思路是这样的，前提是浏览器支持h5地理定位，在这个基础上，获取用户位置，更新用户位置，计算距离，显示到页面，这样就简单实现了一个距离追踪器，为了用户更清楚地看到当前位置，这里接入了百度地图API。
页面结构如下所示：
判断浏览器是否支持HTML5 GeolocationYour Location
您的浏览器不支持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标签
效果展示我的博客，欢迎交流！
源码戳这
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/52148.html
摘要：如果应用程序不再需要接受有关用户的持续位置更新，则只需调用函数，如下所示表示一个唯一的监视请求以便将来取消监视。 GeolocationAPI学习，我写的挺枯燥的，直接跳到最后看示例。 5.1 位置信息 HTML5 Geolocation API的使用方法相当简单。请求一个位置信息，如果用户同意，浏览器就会返回位置信息，该位置信息是通过支持HTML5地理定位功能的底层设备(手机、笔记本...
摘要：此项定义缓存的最长时限。浏览器返回位置信息的最大超时，以毫秒为单位。后台任务会获取当前位置将位置发送给成功回调函数设置定时器监视位置。定时器每次触发都会获取一个新的位置，并且对位置进行比较确认是否存在重大区别。可选用于处理任何错误的函数。 简单使用getCurrentPosition获取当前位置 Geolocation API的基本功能是查询浏览器当前所处的位置。getCurrentP...
摘要：草案的前身名为，于年被提出，于年被接纳，并成立了新的工作团队。的第一份正式草案已于年月日公布。年月日，万维网联盟正式宣布凝结了大量网络工作者心血的规范已经正式定稿。 简述 最近在苦逼学习Javascript，并且是有任务需要去完成的，因此就有一个想法要总结记录一下自己的学习成果。这次的总结主题是html5实现定位地理位置的任务，结合原生的Javascript实现此功能。 html5 什...
摘要：草案的前身名为，于年被提出，于年被接纳，并成立了新的工作团队。的第一份正式草案已于年月日公布。年月日，万维网联盟正式宣布凝结了大量网络工作者心血的规范已经正式定稿。 简述 最近在苦逼学习Javascript，并且是有任务需要去完成的，因此就有一个想法要总结记录一下自己的学习成果。这次的总结主题是html5实现定位地理位置的任务，结合原生的Javascript实现此功能。 html5 什...
阅读 3614·2023-04-26 00:39
阅读 4844·2021-09-22 10:02
阅读 2680·2021-08-09 13:46
阅读 1198·2019-08-29 18:40
阅读 1515·2019-08-29 18:33
阅读 846·2019-08-29 17:14
阅读 1587·2019-08-29 12:40
阅读 3220·2019-08-28 18:07
