Spring + thyymleaf -显示数据库中的多个标记(经度和纬度)

Question

我已经编写了从表中显示的数据库中获取数据的代码。我想获取经度和纬度，这样我就可以通过Google Maps API显示多个标记。目前，我有一个带有硬编码经度和纬度值的标记。我假设必须使用for循环来获取纬度和经度值，以便将数据传递给标记。

这是我目前为地图编写的代码。我已经硬编码了标记的坐标。

<div id="map"></div>
<script th:inline="javascript">
/*<![CDATA[*/
function initMap() {
// The location of the map
var map = new google.maps.Map(document.getElementById('map'),
{center:{ lat: 51.903614, lng: -8.468399 }, zoom: 12 });
var marker = new google.maps.Marker({
position: { lat: 51.903614, lng: -8.468399 },
map: map,
title: 'Hello World',
animation: google.maps.Animation.BOUNCE,
animation: google.maps.Animation.DROP
});
}
/*]]>*/
</script>

这是我创建的表，用于从数据库中获取所有数据。

<div>
<table border="1">
<tr>
<th>ID</th>
<th>Sample</th>
<th>Longitude</th>
<th>Latitude</th>
<th>Sound Level</th>
</tr>
<tr th:each = "sample: ${samples}">
<td th:text="${sample.id}"></td>
<td th:text="${sample.sample}"></td>
<td th:text="${sample.longitude}"></td>
<td th:text="${sample.latitude}"></td>
<td th:text="${sample.db}"></td>
</tr>
</table>

Answer 1

你可以像这样在JavaScript代码块中遍历Thymeleaf模型变量:

<script th:inline="javascript">

function initMap() {
// The location of the map
var map = new google.maps.Map(document.getElementById('map'),
{center:{ lat: 51.903614, lng: -8.468399 }, zoom: 12 });
/*[# th:each="sample : ${samples}"]*/
var marker = new google.maps.Marker({
position: { lat: [[${sample.latitude}]], lng: [[${sample.longitude}]] },
map: map,
title: 'Hello World',
animation: google.maps.Animation.BOUNCE,
animation: google.maps.Animation.DROP
});

/*[/]*/