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> 

이 내 전체 코드는 lat와 lon을 시작하고 현재 lat와 lon을 표시하지만 검사 요소에서 오류를 표시합니다 ... 참조 오류 : varpos가 정의되지 않았습니다. . 두 번째 함수에서 첫 번째 함수의 변수를 참조하는 방법을 모르겠습니다. 이 코드는 시작 지점에서 끝점까지 (어느 방향 으로든) 얼마나 많은 거리를 커버하는지 계산하는 것입니다.참조 오류 : varpos가 정의되지 않았습니다.

+0

꽤 코드를 인쇄 할 다음 번에 만족 초에 varPos 글로벌 정의 그것을 200 % 내가 새로운 문제가 이제 해결 더 읽기 –

+0

이전 문제 : catch되지 않은 형식 오류 : '좌표를 속성을 읽을 수 없습니다를 '가 정의되지 않았습니다. 도와주세요. @LukasA –

답변

0

만든다,

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

덕분에 –

+0

이되었습니다. Uncaught TypeError : undefined의 'coords'속성을 읽을 수 없습니다. PLZ 도와주세요 –

관련 문제