Script para uso de rutas en api google maps.
Publicado por Jorge (1 intervención) el 20/01/2021 14:39:57
Hola buenas, estoy trabajando con html y javascript mi código es el siguiente: Estoy tratando de crear rutas con los marcadores que voy agregando, éstos si funcionan, lo que no es unirlos para crear las rutas. Si alguien me podría explicar se lo agradecería, hace rato que estoy investigando y no sé a qué se debe pero no me funciona.
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
// En el siguiente ejemplo, los marcadores aparecen cuando el usuario hace clic en el mapa..//// Cada marcador está etiquetado con un solo carácter alfabético.const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let labelIndex = 0;function initMap() {
const punto_1 = { lat: -38.7358976, lng: -72.5925679 };
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 8,
center: punto_1,
});
// Este Listener llama a addMarker() cuando se hace clic en el mapa.google.maps.event.addListener(map, "click", (event) => {
addMarker(event.latLng, map);
});
// Agrega un marcador en el centro del mapa.addMarker(punto_1, map);
// dos constantes instanciando directionsservices y directionrendererconst directionsService = new google.maps.DirectionsService();
const directionsRenderer = new google.maps.DirectionsRenderer({
// si puede ser arrastradodraggable: true,
map,panel: document.getElementById("right-panel"),
});
directionsRenderer.addListener("directions_changed", () => {
computeTotalDistance(directionsRenderer.getDirections());
});
displayRoute( lat, lng, directionsService,directionsRenderer
);}// Agrega marcador al mapa.function addMarker(location, map) {
// Agrega marcador a la posicion clickeada, y agrega // con un array por orden alfabetico.new google.maps.Marker({
position: location,
label: labels[labelIndex++ % labels.length],
map: map,
});
}function displayRoute(origin, destination, service, display) {
service.route(
{origin: "Adelaide, SA",
destination: "Broken Hill, NSW",
waypoints: [
{ location: "Adelaide, SA" },
{ location: "Broken Hill, NSW" },
],
travelMode: google.maps.TravelMode.DRIVING,
avoidTolls: true,
},
(result, status) => {
if (status === "OK") {
display.setDirections(result);
} else {
alert("Could not display directions due to: " + status);
} } );}function computeTotalDistance(result) {
let total = 0;const myroute = result.routes[0];
for (let i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}total = total / 1000;
document.getElementById("total").innerHTML = total + " km";
}Valora esta pregunta
0