<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script src="https://maps.googleapis.com/maps/api/js?key=***" type="text/javascript"></script>
<script type="text/javascript">
if (navigator.geolocation) {
window.onload = function() {
navigator.geolocation.getCurrentPosition(function(position) {
startPos = position;
varPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
},function(error) {
alert('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from locaton provider)
// 3: timed out
});
};
navigator.geolocation.watchPosition(function(position) {
document.getElementById('currentLat').innerHTML = position.coords.latitude;
document.getElementById('currentLon').innerHTML = position.coords.longitude;
document.getElementById('distance').innerHTML =
calculateDistance(varPos.coords.latitude, varPos.coords.longitude,
position.coords.latitude, position.coords.longitude);
varPos.coords.latitude = position.coords.latitude;
varPos.coords.longitude = position.coords.longitude;
});
function calculateDistance(lat1, lon1, lat2, lon2) {
var R = 6371; // km
var dLat = (lat2 - lat1).toRad();
var dLon = (lon2 - lon1).toRad();
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
Math.sin(dLon/2) * Math.sin(dLon/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return d;
}
Number.prototype.toRad = function() {
return this * Math.PI/180;
}
navigator.geolocation.getCurrentPosition(function (p) {
var LatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
var mapOptions = {
center: LatLng,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var marker = new google.maps.Marker({
position: LatLng,
map: map,
title: "<div style = 'height:60px;width:200px'><b>Your location:</b><br />Latitude: " + p.coords.latitude + "<br />Longitude: " + p.coords.longitude
});
google.maps.event.addListener(marker, "click", function (e) {
var infoWindow = new google.maps.InfoWindow();
infoWindow.setContent(marker.title);
infoWindow.open(map, marker);
});
});
} else {
alert('Geo Location feature is not supported in this browser.');
}
</script>
<div id="dvMap" style="width:280px; height: 280px">
</div>
<div id="tripmeter">
<p>
Starting Location (lat, lon):<br/>
<span id="startLat">???</span>°, <span id="startLon">???</span>°
</p>
<p>
Current Location (lat, lon):<br/>
<span id="currentLat">???</span>°, <span id="currentLon">???</span>°
</p>
<p>
Distance from starting location:<br/>
<span id="distance">0</span> km
</p>
</div>
</body>
</html>
這是我整個的代碼,它顯示了啓動緯度和經度,然後當前緯度和經度,但在檢查元素,它顯示了一個錯誤......引用錯誤:不定義varpos .. 。我不知道如何在第二個函數中引用第一個函數的變量。這段代碼是計算我從起點到終點(在任何方向)覆蓋的距離。引用錯誤:varpos沒有定義
,請下次再漂亮打印您的代碼,使其200%,現在解決了,我有一個新的問題更具可讀性 –
前面的問題:遺漏的類型錯誤:無法讀取屬性「COORDS '未定義。幫助我@LukasA –