Perdón por la pregunta simple, parece que no puedo entender esto. No soy muy bueno con los archivos JS y json.
Tengo un archivo .json que proporciona coordenadas cada 5 segundos de las ubicaciones de los objetos de mi servidor. He estado trabajando para trazar las coordenadas en un mapa usando un folleto para el acceso del personal.
Actualmente, he usado PHP para decodificar el json, recorrer y tomar todas las coordenadas y trazar los marcadores en el mapa, lo que funciona muy bien, espero que me gustaría cambiarlo para que no tengamos que actualizar la página/navegador para actualizar el marcadores y, en su lugar, hacer que los marcadores se actualicen en vivo cuando cambie el archivo json.
Este es mi código de trabajo para PHP:
<?php $count = 0; $str = file_get_contents('coords.json'); $json = json_decode($str, true); foreach($json['coords'] as $coords) { $count++; ${'yCord_'.$count} = $coords['y']; ${'xCord_'.$count} = $coords['x']; }; for ($i = 1; $i <= $count; $i++) { echo "L.marker([" . ${'xCord_'.$i} . "," . ${'yCord_'.$i} . "], {icon: icon_door}).addTo(map);"; } ?>
Después de investigar, parece que no es posible actualizar el sitio web en vivo solo usando PHP, así que tengo que usar JS. Esto es lo que tengo hasta ahora:
$.getJSON( "coords.json", function(json1) { for (var i = 0; i < json1.coords.length; i++) { var place = json1[i]; // Creating a marker and putting it on the map var customIcon = L.icon({ iconUrl: 'https://leafletjs.com/examples/custom-icons/leaf-green.png', iconSize: [38, 40], iconAnchor: [10, 40], popupAnchor: [5, -40] }); var marker = L.marker([place.x, place.y], {icon: customIcon}); } });
Creo que no entiendo cómo extraer ciertos datos del archivo json, cada publicación en línea que he encontrado con respecto a hacer esto tiene una estructura de archivo json diferente a la mía.
Mi archivo json (coords.json) se ve así:
{ "coords": { "1": { "x": 21249, "y": 7135 }, "2": { "x": 21249, "y": 7125 }, "3": { "x": 21244, "y": 7140 } } }
Dependiendo de la cantidad de objetos, el json puede aumentar/disminuir la cantidad de coordenadas siguiendo el mismo patrón (4,5...).
Cualquier ayuda es muy apreciada.
EDITAR: logré resolverlo, si alguien quiere mi solución, consulte a continuación:
$.getJSON( "coords.json", function(json1) { for(var key in json1.coords){ var latLng = L.latLng([json1.coords[key].x, json1.coords[key].y]); L.marker(latLng, {icon: enciv}).addTo(map); } });