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实现一个距离追踪器,希望对大家有所帮助