1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
<!DOCTYPE html>
<html>
<head>
<title>GPX to Google Directions</title>
<style>
body { font-family: Arial, sans-serif; margin: 2rem; }
input[type="file"] { margin: 1rem 0; }
#output { margin-top: 1rem; word-break: break-word; max-width: 100%; }
</style>
</head>
<body>
<h2>Upload GPX File</h2>
<input type="file" id="gpxFile" accept=".gpx" />
<div id="output"></div>
<script>
function haversine(lat1, lon1, lat2, lon2) {
const R = 6371000; // meters
const toRad = x => x * Math.PI / 180;
const dLat = toRad(lat2 - lat1);
const dLon = toRad(lon2 - lon1);
const a = Math.sin(dLat/2)**2 +
Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) *
Math.sin(dLon/2)**2;
return 2 * R * Math.asin(Math.sqrt(a));
}
function interpolatePoints(points, targetCount) {
const distances = [0];
for (let i = 1; i < points.length; i++) {
const d = haversine(points[i-1].lat, points[i-1].lon, points[i].lat, points[i].lon);
distances.push(distances[i-1] + d);
}
const totalDistance = distances[distances.length - 1];
const interval = totalDistance / (targetCount - 1);
const result = [];
let targetDist = 0;
let j = 0;
for (let i = 0; i < targetCount; i++) {
while (j < distances.length - 2 && distances[j+1] < targetDist) j++;
const d1 = distances[j];
const d2 = distances[j+1];
const p1 = points[j];
const p2 = points[j+1];
const ratio = (targetDist - d1) / (d2 - d1);
const lat = p1.lat + ratio * (p2.lat - p1.lat);
const lon = p1.lon + ratio * (p2.lon - p1.lon);
result.push({ lat, lon });
targetDist += interval;
}
return result;
}
document.getElementById('gpxFile').addEventListener('change', function(event) {
const file = event.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = function(e) {
const parser = new DOMParser();
const xml = parser.parseFromString(e.target.result, "application/xml");
const rtepts = Array.from(xml.getElementsByTagName('rtept'));
if (rtepts.length < 2) {
document.getElementById('output').textContent = "GPX file must contain at least 2 <rtept> points.";
return;
}
const points = rtepts.map(pt => ({
lat: parseFloat(pt.getAttribute('lat')),
lon: parseFloat(pt.getAttribute('lon'))
}));
const maxPoints = 25;
const sampled = interpolatePoints(points, maxPoints);
const waypoints = sampled.map(p => `${p.lat},${p.lon}`).join('/');
const directionsUrl = `https://www.google.com/maps/dir/${waypoints}`;
document.getElementById('output').innerHTML =
`<strong>Google Directions URL:</strong><br><a href="${directionsUrl}" target="_blank">${directionsUrl}</a>`;
};
reader.readAsText(file);
});
</script>
</body>
</html>
|
