Question

我正在尝试使用javascript和geolocation进行简单的tripMeter工作。这是我目前的代码：

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<script type="text/javascript" src="jLocationV1.js"></script>

<title>Simple Trip Meter for jLocation</title>
</head>
<body>
<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>

<script type="text/javascript">
window.onload = function() {

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        var startPos = 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(startPos.coords.latitude, startPos.coords.longitude, position.coords.latitude, position.coords.longitude);
    });
  }
};
</script>

</html>

问题是startPos变量没有被设置，当我测试代码时，我得到一个“ReferenceError：startPos未定义”。

请注意，calculateDistance函数位于不同的外部js文件中。

我做错了什么？

提前致谢。

编辑：

外部文件中的计算距离函数如下：

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;
}

Answer 1

变量startPos被定义为

中的本地

navigator.geolocation.getCurrentPosition(function(position) {
    var startPos = position;
...

});

在代码部分之外不可见：

navigator.geolocation.watchPosition(function(position) {
            document.getElementById("currentLat").innerHTML = position.coords.latitude;
            document.getElementById("currentLon").innerHTML = position.coords.longitude;
            document.getElementById("distance").innerHTML =
            calculateDistance(startPos.coords.latitude, startPos.coords.longitude, position.coords.latitude, position.coords.longitude);
});

}

你得到错误：

Uncaught ReferenceError: startPos is not defined

startPos变量必须在onload函数的开头定义：

window.onload = function() {
    var startPos;

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            //var startPos = position;
            startPos = position;
        ...

Javascript中的“ReferenceError：变量未定义”

1 个答案: