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

网页制作 2024/12/29 佚名

3 2 1

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实现一个距离追踪器，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

html5,geolocation,追踪器

标签：

html5,geolocation,追踪器

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

无争山庄资源网 Copyright www.whwtcm.com

评论“使用HTML5 Geolocation实现一个距离追踪器”

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

暂无“使用HTML5 Geolocation实现一个距离追踪器”评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年12月29日

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

html5,geolocation,追踪器

HTML5实现自带进度条和滑块滑杆效果

canvas线条的属性详解

评论“使用HTML5 Geolocation实现一个距离追踪器”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接