<!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가 정의되지 않았습니다.
꽤 코드를 인쇄 할 다음 번에 만족 초에 varPos 글로벌 정의 그것을 200 % 내가 새로운 문제가 이제 해결 더 읽기 –
이전 문제 : catch되지 않은 형식 오류 : '좌표를 속성을 읽을 수 없습니다를 '가 정의되지 않았습니다. 도와주세요. @LukasA –