亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

使用HTML5 Geolocation實(shí)現(xiàn)一個(gè)距離追蹤器

  發(fā)布時(shí)間：2018-04-09 15:13:34   作者：佚名   我要評(píng)論
HTML5 Geolocation（地理定位）用于定位用戶的位置，那么怎么實(shí)現(xiàn)一個(gè)距離追蹤器呢？下面小編給大家?guī)?lái)了基于HTML5 Geolocation實(shí)現(xiàn)一個(gè)距離追蹤器的實(shí)例代碼，感興趣的朋友一起看看吧

HTML5 Geolocation（地理定位）用于定位用戶的位置。那么如何實(shí)現(xiàn)一個(gè)距離追蹤器呢？我的思路是這樣的，前提是瀏覽器支持h5地理定位，在這個(gè)基礎(chǔ)上，獲取用戶位置，更新用戶位置，計(jì)算距離，顯示到頁(yè)面，這樣就簡(jiǎn)單實(shí)現(xiàn)了一個(gè)距離追蹤器，為了用戶更清楚地看到當(dāng)前位置，這里接入了百度地圖API。

頁(yè)面結(jié)構(gòu)如下所示：

<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">經(jīng)度:  </p>
    <p id="accuracy">準(zhǔn)確度:  </p>
    <p id="timestamp">時(shí)間戳:  </p>
    <p id="currDist">目前旅行距離:  </p>
    <p id="totalDist">旅行總距離:  </p>
   </div>
  </article>
 </section>
 <!-- 百度地圖位置顯示 -->
 <div id="allmap"></div>    
</div>

判斷瀏覽器是否支持HTML5 Geolocation

在body加載時(shí)調(diào)用loadDemo()方法，方法根據(jù)navigator.geolocation來(lái)判斷瀏覽器是否支持HTML5 Geolocation；如果navigator.geolocation為true，那么我們就可以開(kāi)始對(duì)用戶位置進(jìn)行獲取更新

實(shí)時(shí)獲取用戶位置

HTML5可以通過(guò)getCurrentPosition() 方法來(lái)獲得用戶的位置。但這個(gè)只獲取一次，所以我們選用了 watchPosition()這個(gè)方法，它能返回用戶的當(dāng)前位置，并繼續(xù)返回用戶移動(dòng)時(shí)的更新位置（就像汽車上的GPS）。

navigator.geolocation.watchPosition(updateLocation, handleLocationError, {
        timeout: 10000
       });

在不斷獲取位置的同時(shí)，調(diào)用updateLocation這個(gè)方法，把位置情況顯示在頁(yè)面上，當(dāng)然還要調(diào)用計(jì)算距離的方法來(lái)獲取距離，以及不斷更新百度地圖上的位置。

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 = "經(jīng)度:  " + longitude;
document.getElementById("accuracy").innerHTML = "準(zhǔn)確度:  " + accuracy;
document.getElementById("timestamp").innerHTML = "時(shí)間戳:  " + 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;

計(jì)算距離

把開(kāi)始位置和當(dāng)前位置的經(jīng)度緯度作為參數(shù)放入函數(shù)，通過(guò)換算，來(lái)計(jì)算距離（單位為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，你需要注冊(cè)百度賬號(hào)，申請(qǐng)成為百度開(kāi)發(fā)者然后獲取一個(gè)密鑰，才能使用相關(guān)服務(wù)戳這 根據(jù)文檔你可以知道如何使用這個(gè)API 代碼如下：

var map = new BMap.Map("allmap"); // 創(chuàng)建Map實(shí)例
 map.centerAndZoom(new BMap.Point(longitude, latitude), 14); //設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別
 map.addControl(new BMap.MapTypeControl()); //添加地圖類型控件
 map.setCurrentCity("南昌"); //顯示城市,此項(xiàng)必須設(shè)置
 map.enableScrollWheelZoom(true); //開(kāi)啟鼠標(biāo)滾輪縮放
 // 以下為當(dāng)前位置標(biāo)注設(shè)置
 var point = new BMap.Point(longitude, latitude);
 map.centerAndZoom(point, 14);
 var marker = new BMap.Marker(point); //創(chuàng)建標(biāo)注
 map.addOverlay(marker); //將標(biāo)注添加到地圖中
 marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳動(dòng)的動(dòng)畫(huà)
 // 百度地圖API功能--------end

記得先引入一個(gè)script標(biāo)簽

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

總結(jié)

以上所述是小編給大家介紹的使用HTML5 Geolocation實(shí)現(xiàn)一個(gè)距離追蹤器，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論