Estoy tratando de pasar datos de latitud y longitud desde una base de datos MySQL a través de mi aplicación Spring Boot a una función de JavaScript. Pude usar Thymeleaf para mostrar una tabla en la página web con los datos, por lo que sé que las clases de servicio y controlador están configuradas correctamente.
A continuación se muestra cómo se llena mi tabla:
<table style="word-wrap:break-word;white-space:normal;" class="table table-bordered"> <thead class="table-dark"> <tr> <th>Latitude</th> <th>Longitude</th> <th></th> </tr> </thead> <tbody> <th:block th:each="point : ${listPoints}"> <tr> <td>[[${point.LAT}]]</td> <td>[[${point.LNG}]]</td> </tr> </th:block> </tbody> </table>También codifiqué los parámetros de mi función javascript que funciona. A continuación se muestra la función js:
addMarker({lat:50.772775,lng:3.889969}); function addMarker(coords) { var marker = new google.maps.Marker({ position: coords, map:map }) }Necesito una forma de recorrer mis lat y lng para agregar un marcador para cada uno. ¡Gracias!
Supongamos que tiene un Point de clase:
public class Point { double lat; double lng // getters omitted } Además, su servlet/controlador pasa una lista de puntos como atributo listPoints a la página de Thymeleaf, para que se muestre en su tabla:
<tbody> <th:block th:each="point : ${listPoints}"> <tr> <td>[[${point.lat}]]</td> <td>[[${point.lng}]]</td> </tr> </th:block> </tbody> En su JavaScript (donde sea que esté), debe llamar a la función addMarker para cada una de esas coordenadas. Por ejemplo:
addMarker({lat:50.772775,lng:3.889969});para el primer punto y así sucesivamente.
Puede pasar los puntos dentro de un bloque de javascript en línea a su página de Thymeleaf:
<script th:inline="javascript"> var points = /*[[${listPoints}]]*/ null; console.log(points); // just a debug print to verify all points received points.forEach(p => addMarker(p)); </script> Ahora debe asegurarse de que este script con puntos poblados se cargue en el orden correcto (cuando la función addMarker esté lista para agregar marcadores en el mapa). También puede envolver esto dentro de una función que se invoca onload .
Ver también: