应用HTML5 Geolocation完成1个间距跟踪器

日期:2020-10-10 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

HTML5 Geolocation(自然地理精准定位)用于精准定位客户的部位。那末怎样完成1个间距跟踪器呢?我的思路是这样的,前提条件是访问器适用h5自然地理精准定位,在这个基本上,获得客户部位,升级客户部位,测算间距,显示信息到网页页面,这样就简易完成了1个间距跟踪器,以便客户更清晰地看到当今部位,这里接入了百度搜索地形图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() 方式来得到客户的部位。但这个只获得1次,因此大家采用了 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,你必须申请注册百度搜索账户,申请办理变成百度搜索开发设计者随后获得1个密匙,才可以应用有关服务戳这 依据文本文档你能够了解怎样应用这个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

记得先引进1个script标识

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密匙" ></script>

总结

以上所述是网编给大伙儿详细介绍的应用HTML5 Geolocation完成1个间距跟踪器,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!