0
<!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沒有定義

+0

,請下次再漂亮打印您的代碼,使其200%,現在解決了,我有一個新的問題更具可讀性 –

+0

前面的問題:遺漏的類型錯誤:無法讀取屬性「COORDS '未定義。幫助我@LukasA –

回答

0

定義varPos全球開頭

... 
if (navigator.geolocation) { 
var varPos; 
.. 
+0

感謝它的工作 –

+0

現在它說:Uncaught TypeError:無法讀取未定義的屬性'coords'。 PLZ幫助我 –