Spring+Thymeleaf从数据库加载经纬度批量展示Google Maps标记

问题描述 #

我已经实现了从数据库获取数据并在表格中展示的功能，现在需要提取每条数据的经纬度信息，通过Google Maps API在地图上展示多个标记。目前仅能实现硬编码经纬度的单个标记，推测需要通过循环遍历数据来批量创建标记组件。

当前代码 #

地图实现（硬编码单个标记） #

<div id="map"></div>

<script th:inline="javascript">
/*<![CDATA[*/
function initMap() {
    // 初始化地图
    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.DROP
    });
}
/*]]>*/
</script>

注：原代码中重复设置了animation属性，已修正为仅保留DROP动画

数据库数据展示表格 #

<div>
<table border="1">
    <tr>
        <th>ID</th>
        <th>样本名称</th>
        <th>经度</th>
        <th>纬度</th>
        <th>声级(dB)</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>

解决方案 #

通过Thymeleaf将后端的samples数据传递到JavaScript中，然后遍历数据批量创建地图标记，同时可以优化地图视野自动适配所有标记：

<div id="map"></div>

<script th:inline="javascript">
/*<![CDATA[*/
function initMap() {
    // 从后端获取样本数据（Thymeleaf自动序列化为JSON数组）
    const samples = [[${#lists.toJson(samples)}]];
    
    // 初始化地图，先默认一个中心点，后续会自动调整
    const map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: { lat: 51.903614, lng: -8.468399 }
    });

    // 创建标记数组，用于后续调整地图视野
    const markers = [];

    // 遍历样本数据，创建每个标记
    samples.forEach(sample => {
        const marker = new google.maps.Marker({
            position: { 
                lat: parseFloat(sample.latitude), 
                lng: parseFloat(sample.longitude) 
            },
            map: map,
            title: `样本${sample.sample} - 声级${sample.db}dB`,
            animation: google.maps.Animation.DROP
        });
        markers.push(marker);
    });

    // 自动调整地图视野，包含所有标记
    const bounds = new google.maps.LatLngBounds();
    markers.forEach(marker => {
        bounds.extend(marker.getPosition());
    });
    map.fitBounds(bounds);
}
/*]]>*/
</script>

<!-- 表格部分保持不变 -->
<div>
<table border="1">
    <tr>
        <th>ID</th>
        <th>样本名称</th>
        <th>经度</th>
        <th>纬度</th>
        <th>声级(dB)</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>
</div>

关键说明 #

• 使用${#lists.toJson(samples)}将后端的samples集合序列化为JSON格式，让JavaScript可以直接访问
• 遍历每个样本时，将经纬度字符串转为浮点数（确保Google Maps API能正确识别）
• 标记的title使用样本的名称和声级信息，鼠标悬停时会显示
• 通过LatLngBounds自动计算所有标记的边界，调用fitBounds让地图自动缩放并移动到包含所有标记的视野
• 修正了原代码中重复设置animation的问题，避免属性覆盖

内容的提问来源于stack exchange，提问作者Chewie