JavaScript - Eliminar rutas intermedias en geolocalización html

 
Vista:
sin imagen de perfil

Eliminar rutas intermedias en geolocalización html

Publicado por ZeroByte (2 intervenciones) el 27/02/2015 22:57:06
Hola a todos, a ver si alguien puede ayudarme, soy principiante en java y tengo que hacer una página de geolocalización en donde al darle a un botón se eliminen las rutas intermedias dejando solo la inicial y la final. El problema es que al darle al botón no me realiza nada, pongo el código para ver si alguien puede echarme una mano.

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Geolocalización</title>
<script type="text/javascript" src="zepto.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="gmaps.js"></script>
<link rel="stylesheet" type="text/css" href="mypath.css" />
<script type="text/javascript">
// Modificar la aplicación con geolocalización en Google Maps, Añadiendo un botón de compactar  las rutas mostradas.
// Al pulsar el botón se deben eliminar los puntos intermedios de la ruta.
// La ruta se compactará volviendo a renderizar el mapa limpio y mostrando sobre el solo los puntos inicial y final, juntro con la ruta directa que los une.
var map, lat, lng;
var Origen;
var marker = new google.maps.Marker({
lat: lat,
lng: lng,
map: map,
}); // Para que aparezca el marcador tienes que crear una variable marcador
var marcadores = []; // Se tiene que crear un array en el que se guarde el número de marcadores que hay en el mapa
$(function(){
function enlazarMarcador(e){
// muestra ruta entre marcas anteriores y actuales
map.drawRoute({
origin: [lat, lng], // origen en coordenadas anteriores
// destino en coordenadas del click o toque actual
destination: [e.latLng.lat(), e.latLng.lng()],
travelMode: 'driving',
strokeColor: '#476BB2',
strokeOpacity: 0.6,
strokeWeight: 5,
});
lat = e.latLng.lat(); // guardar coordenadas para la marca siguiente
lng = e.latLng.lng();
marcadores.push(marker);
map.addMarker({ lat: lat, lng: lng}); // pone el marcador final de la ruta en el mapa
};
// Esta función es la que localiza las coordenadas de origen en el mapa
function geolocalizar(){
GMaps.geolocate({
success: function(position){
lat = position.coords.latitude; // guarda coords en lat y lng
lng = position.coords.longitude;
map = new GMaps({ // muestra mapa centrado en coords [lat, lng]
el: '#map',
lat: lat,
lng: lng,
click: enlazarMarcador,
tap: enlazarMarcador,
});
marcadores.push(marker);
Origen = map.addMarker({ lat: lat, lng: lng}); // marcador en [lat, lng] , guardamos el primer marcador como origen
},
error: function(error) { alert('Geolocalización falla: ' + error.message); },
not_supported: function(){ alert("Su navegador no soporta geolocalización"); },
});
};
geolocalizar();
});
function FuncCompactar(){
alert(" El número de marcadores es : " + marcadores.length );
alert(" Se compacta la ruta dejando solo los marcadores inicial y final.");
for ( var i = 0; i < ( marcadores.length - 1 ) ; i++) {
marcadores.setMap(null);
alert(" El marcador " + i + " se ha desconectado. ");
};
Origen;
map.addMarker({ lat: lat, lng: lng}); // pone el marcador final de la ruta en el mapa
marcadores = [];
};
</script>
</head>
<body>
<p>Al pulsar "compactar" se borrarán las rutas intermedias <button type="button" id="compactar" onclick="FuncCompactar()" >Compactar </button></p>
<div id="map"></div>
</body>
</html>

Archivo aqui:

https://drive.google.com/file/d/0B7ZmgukjEtgZNW5sLXlJTEpCWGs/view?usp=sharing

Un saludo y gracias.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de txema
Val: 71
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Eliminar rutas intermedias en geolocalización html

Publicado por txema (16 intervenciones) el 28/02/2015 04:48:27
Hola ZeroByte :

creo que puedo ayudarte pero no veo por dónde comenzar.

En primer lugar, lo que veo es javascript (no java que es muy diferente)

No veo ruta.

Si tuviéramos todo ello, Google maps registra (aunque sea por defecto) la distancia más corta, rutas alternativas o no, incluyendo o no autovías, autopistas, etc.

Haces referencia a puntos intermedios y eliminarlos. Eso es muy fácil pero solo veo un intento de array mal conformado.

También refieres a la geolocalización. No la veo estructurada.

Claro está que los archivos de referencia desde https://drive.google.com/file/d/0B7ZmgukjEtgZNW5sLXlJTEpCWGs/view?usp=sharing no los puedo ver.

Coméntanos y si es posible, compacta los archivos y los envías, (tu proyecto completo) ya que me faltan muchos datos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Eliminar rutas intermedias en geolocalización html

Publicado por ZeroByte (2 intervenciones) el 28/02/2015 05:10:01
Hola Txema gracias por contestar, me he registrado para subir los archivos aquí, espero explicarme bien, el mapa trazo rutas que luego al apretar el botón compactar se debería de redibujar el mapa y borrar las rutas intermedias dejando solo la inicial y final.

Un saludo y gracias por contestar.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Manuel
Val: 17
Ha aumentado su posición en 2 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Eliminar rutas intermedias en geolocalización html

Publicado por Manuel (10 intervenciones) el 02/03/2015 10:16:50
Ese es el ejercicio final del MOOC HTML5 4ª edición de MiriadaX... que estos días, en todos los foros estáis preguntado todos lo mismo. Pero bueno, te voy a dar la pista para que lo resuelvas sin romperte la cabeza:

-guarda en localStorage la lat y lng iniciales: localStorage.latini=lat; localStorage.lngini=lng;

-después vas guardando también en localStorage la última lat y lng que el usuario va clickando (cada vez que hace click o tap, pues cambias el valor), así tienes las fin: localStorage.latfin=lat; localStorage.lngfin=lng;

Con lo anterior ya tienes el punto inicial y final necesarios para compactar.

-cuando quieras limpiar rutas y unir solo el punto inicial y final, pues es sencillo: repintas de nuevo el mapa y pones punto inicial y final y pintas ruta entre ambos con la función enlazar:

function compactar(){
//pinto de nuevo el mapa
map = new GMaps({ // muestra mapa centrado en coords iniciales
el: '#map',
lat: localStorage.latini,
lng: localStorage.lngini,
});
//ponemos punto inicial
map.addMarker({ lat: localStorage.latini, lng: localStorage.lngini});
//ponemos punto final
map.addMarker({ lat: localStorage.latfin, lng: localStorage.lngfin});
// muestra ruta entre marcas anteriores y actuales
map.drawRoute({
origin: [localStorage.latini, localStorage.lngini], // coordenadas originales
// coordenadas finales
destination: [localStorage.latfin, localStorage.lngfin],
travelMode: 'driving',
strokeColor: '#476BB2',
strokeOpacity: 0.6,
strokeWeight: 5,
});

Creo que con esto deberías apañarte para terminar.

hasta luego
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar