黑松山资源网 Design By www.paidiu.com
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实现一个距离追踪器,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
黑松山资源网 Design By www.paidiu.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
黑松山资源网 Design By www.paidiu.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 黑神话悟空上品鼠弩手精魄获取方法一览|上品鼠弩手精魄收集攻略
- 中国音乐地图听见世界非物质文化遗产《非遗HQCD》wav
- 中国民乐合奏作品集《华夏之音HQ》头版限量编号[WAV+CUE]
- [电影原声带]黎允文《天将雄师》[FLAC+CUE]
- 曝NS继任机型已进入量产阶段:已花了30亿日元
- 不是Switch2?曝《马里奥惊奇》NS捆绑包即将公开
- 暖心任天堂!网友Switch维修返还时贴纸被完好保留
- 《国语老歌 经典对唱情歌 2CD》[WAV/分轨][1.1GB]
- 《刀郎 翻唱精选华语专辑 披着羊皮的狼 》[WAV+CUE][430MB]
- 《真的田震 中国乐坛红极一时的歌者 精品集》[WAV+CUE][300MB]
- 群星.1995-新滚石九大天王之情歌大全【滚石】【WAV+CUE】
- 群星.1993-滚石九大天王十二出好戏·纵夏欢唱【滚石】【WAV+CUE】
- 群星.1993-滚石九大天王十二出好戏·贺岁齐唱【滚石】【WAV+CUE】
- 黑神话悟空上品虫校尉精魄获取方法一览|上品虫校尉精魄收集攻略
- 《指环王:夏尔的传说》推迟至2025年初发行