Problema al pasar varios parámetros a una funciona

[jc1992]

Buenas noches ! Me estoy peleando con la api de google maps v3 y obtengo la latitud y la longitud

Una parte la obtengo de la siguiente manera

Código Javascript:

function showPosition(position) {
    x.innerHTML = "<div id='lat1'>Latitude:</div> " + position.coords.latitude + 
    "<div id='long1'><br>Longitude:</div> " + position.coords.longitude;    
}
 

Y esto me lo hace correctamente luego tengo un foreach con PHP que me carga correctamente las latitutes y las longitudes de otros sitios.

Código PHP:

@foreach ($municipios as $user)
    <p>{{ $user->municipio }}</p>
        <p><div id="lat2">Latitud:{{ $user->latitud }}</div></p>
    <p><div id="long2">Longitud:{{ $user->longitud }}</div></p>
    <a onclick="calculardospuntos(this)">Calcular distancia entre dos puntos</a>
@endforeach
 

El problema está en que quiero pasar los cuatro resultados a la función calculardospuntos() y mostrar en un mensaje de alerta su valor y yo a partir de ahi seguir investigando.

He probado con el getElementById pero me da un resultado de null

Código Javascript:

function calculardospuntos(id){
  var lat1=document.getElementById(id);
  var long1=document.getElementById("long1");
  var lat2=document.getElementById("lat2");
  var long2=document.getElementById("long2");
  alert(lat1);
  alert(long1);
  alert(lat2);
  alert(long2);
 
}
 

[Alexis88]

Lo estás haciendo mal. Para empezar, en ese foreach, estás generando elementos <div> con el mismo id en cada iteración; ten en cuenta que el id es un valor único e irrepetible. Por otro lado, si te fijas bien, a la función le estás pasando el enlace como elemento, no le estás pasando ningún id que es con lo que intentas obtener el valor para lat1, además, si deseas obtener el contenido de cada <div>, debes de tomarlo con la propiedad innerHTML.

En lugar de usar elementos <div> que son de bloque, usas elementos <label> o <span>, que son de línea, agrupa cada bloque de elementos en un <div> y para que no te hagas líos al momento de tomar los valores de dichos <span> o <label> (lo que elijas), accede al elemento padre del enlace con la propiedad parentNode, asigna a los y luego busca dentro de él a los <span> o <label>, clases para identificarlos (las clases sí pueden repetirse) y buscas a dichos elementos dentro del elemento padre (que en este caso sería el <div> a partir de dichas clases, pudiendo hacerlo con mayor facilidad utilizando el método querySelector.

Saludos

[jc1992]

Buenas noches , estoy probando lo que me dices del foreach de cambiar los div por label y cuando ejecuto la consola siempre me sale el primer foreach.

Código PHP:

@foreach ($municipios as $user)
    <p>{{ $user->municipio }}</p>
        <p><label><div id="lat2" name="lat2">Latitud:{{ $user->latitud }}</div></label></p>
    <p><label><div id="long2" name="long2">Longitud:{{ $user->longitud }}</div></label></p>
    <a onclick="calculardospuntos()">Calcular distancia entre dos puntos</a>
@endforeach
 

Y esta la función javascript que recibe el contenido

Código Javascript:

function calculardospuntos(){
var father = document.getElementById('lat2');
var esperar = document.getElementById('long2');
 
var children = father.childNodes;
var esperar = esperar.childNodes;
console.log(children); 
console.log(esperar);
}
 

El problema viene que cuándo hago click me obtiene sólo los datos del primer municipio intentando hacer lo que tu me has dicho.

[Alexis88]

Sigues cometiendo el error de asignar el mismo id a más de un elemento, además, te sugerí que los datos vayan en elementos <label>, no que colocaras a los <div> dentro de ellos. Te vuelvo a decir que dicho dato debe de ser único en el documento. Mejor utiliza clases y accede a dichos elementos como te expliqué, es decir, tomando al elemento que contiene al enlace y luego buscas en él a los <label>.

Te lo voy a explicar con un sencillo ejemplo:

Código HTML:

<div>
    <label class = "nombre">Juan</label>
    <label class = "apellido">Pérez</label>
    <button onclick = "datos(this)">Mostrar datos</button>
</div>
 
<div>
    <label class = "nombre">Vanessa</label>
    <label class = "apellido">García</label>
    <button onclick = "datos(this)">Mostrar datos</button>
</div>
 

Código Javascript:

function datos(boton){
    var padre = boton.parentNode,
        nombre = padre.querySelector(".nombre").innerText,
        apellido = padre.querySelector(".apellido").innerText;
 
    alert("Nombre completo: " + nombre + " " + apellido);
}
 

Cuando pulse cualquiera de los botones contenidos en los <div>, ejecuto una función en la cual recibo al botón, busco al elemento que lo contiene y dentro de este, busco mediante las clases que asigné a los <label> que contienen los datos para finalmente mostrarlos en un mensaje de alerta.

Saludos

[jc1992]

Buenas tardes ! He conseguido obtener los cuatro valores que tengo en el momento

Código Javascript:

function datos(boton){
    var padre = boton.parentNode;
    var lat2 = padre.querySelector(".lat2").innerText;
    var long2 = padre.querySelector(".long2").innerText;
    var lat1 = document.getElementById("lat1").innerText;
    var long1 = document.getElementById("long1").innerText;
    alert(lat1+long1+lat2+long2);
}
 

Ahora mi cuestión está en si puedo utilizar estos valores con la api de google maps para poder tazar la ruta posteriormente , al estar fuera de la función necesitaria saber cómo llamar a los datos.

Código Javascript:

var origen = new google.maps.LatLng(41.6938443, 2.3538418);
var destino = new google.maps.LatLng(41.683199, 2.2859957);
 

[Alexis88]

Eso es algo que sabrás cuando pruebes reemplazando esos valores por las variables. No hay de otra.

Saludos

[jc1992]

Vale , lo he conseguido :) ! He entendido cómo funciona el paso de parámetros y todo eso que es lo que realmente me preocupaba gracias a tu ejemplo anterior.

No se si seguir con el tema aquí así que voy a poner la duda igual ya que mas o menos sigue siendo lo mismo y si no cerramos el tema y lo abro en php

Ahora consigo crear la ruta (punto A,B) , me muestra el trazado en gps y el tiempo que va a tardar.

Mi pregunta ahora consiste en lo siguiente.

Tengo los datos que me interesan guardados en la base de datos (destino, latitud y longitud) y me gustaría que los destinos se mostraran ordenados por la cercanía)

Los puedo devolver con un JSON

Código Javascript:

[{"provincia_id":1,"municipio":"Alegr\u00eda-Dulantzi","id":1,"latitud":42.841492,"longitud":-2.5135074},{"provincia_id":1,"municipio":"Amurrio","id":2,"latitud":43.0526489,"longitud":-3.0010217},{"provincia_id":1,"municipio":"A\u00f1ana","id":3,"latitud":42.802352,"longitud":-2.982607},
 

Vale , pues si la ruta que realizo tiene estos lugares cercas me gustaría que apareciesen , alguna ayuda al respecto ?