将数据从 Spring 启动应用程序传递到 javascript 函数

Question

我试图通过我的 Spring 引导应用程序将来自 MySQL 数据库的纬度和经度数据传递到 javascript 函数中。我能够使用 Thymeleaf 在带有数据的网页上显示 table，所以我知道服务和控制器类设置正确。

下面显示了我的 table 是如何填充的：

<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>

我还硬编码了我的 javascript 函数的参数。下面是js函数：

addMarker({lat:50.772775,lng:3.889969});

function addMarker(coords) {
    var marker = new google.maps.Marker({
        position: coords,
        map:map
    })
}

我需要一种方法来遍历我的纬度和经度，以便为每个添加一个标记。谢谢！

Answer 1

假设你有一个 class Point:

public class Point {
   double lat;
   double lng
   // getters omitted
}

此外，您的 servlet/controller 将点列表作为属性 listPoints 传递给 Thymeleaf 页面，以便它显示在您的 table:

    <tbody>
        <th:block th:each="point : ${listPoints}">
            <tr>
                <td>[[${point.lat}]]</td>
                <td>[[${point.lng}]]</td>
            </tr>
        </th:block>
    </tbody>

在您的 JavaScript（无论它位于何处）中，您必须为所有这些坐标中的每一个调用 addMarker 函数。例如：

addMarker({lat:50.772775,lng:3.889969});

第一点等等。

您可以将 javascript-inlining 块内的点传递到您的 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>

现在您必须确保以正确的顺序加载带有填充点的脚本（当 addMarker 函数准备好在地图上添加标记时）。您还可以将其包装在调用 onload.

的函数中

另请参阅：

Setting up a JavaScript variable in Thymeleaf
What html tags support the onload/onerror javascript event attributes?

将数据从 Spring 启动应用程序传递到 javascript 函数

Pass data from Spring Boot app into javascript function

javascript

google-maps-markers

thymeleaf

spring-boot