reference error : varpos is not defined

Question

<!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...我不知道如何引用第二个函数中第一个函数的变量。这段代码是计算我从起点到终点（在任何方向）的距离。

Answer 1

开头定义varPos全局

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

reference error : varpos is not defined

reference error : varpos is not defined

javascript

function

reference

geolocation

google-geolocation