Leaflet 结合 SpringBoot 实现地图点击获取当地时间

2. 前端地图点击交互

前端引入 Leaflet 初始化地图后，绑定点击事件获取经纬度坐标。这里使用了 Layui 组件来弹出详情窗口，你可以根据项目情况替换为其他模态框。

function onMapClick(e) {
    var title = "坐标信息展示";
    parent.layer.open({
        type: 2,
        title: [title, 'font-size:16px;text-align:center;font-weight: bold;'],
        scrollbar: false,
        area: ['45%', '50%'],
        content: ctx + "/eq/wcountry/globaldetail?lng=" + e.latlng.lng + "&lat=" + e.latlng.lat,
        btn: [],
        yes: function(index, layero){},
        cancel: function(index, layero){
            parent.layer.close(index);
            return false;
        }
    });
}
mymap.on('click', onMapClick);

3. 前后端数据交互

Controller 层负责接收经纬度参数，调用工具类计算北京时间与当地时间，并传递给视图层。Thymeleaf 模板用于渲染表格展示结果。

/**
 * - 全球信息可视化，集成北京时间、当地时间、所属时区
 */
@RequiresPermissions("eq:capital:globaldetail")
@GetMapping("/globaldetail")
public String globaldetail(String lng, String lat, ModelMap mmap) {
    mmap.put("lng", lng);
    mmap.put("lat", lat);
    
    long currentTimeMillis = System.currentTimeMillis();
    String beijingTime = ZoneUtils.getTimeFormart(null, currentTimeMillis);
    mmap.put("beijingTime", beijingTime);

    int timeZoneOffset = ZoneUtils.calculateTimeZone(Double.parseDouble(lng));
    String offset = (timeZoneOffset < 0 ? "-" : "+") + Math.abs(timeZoneOffset);
    String zongIdStr = "UTC" + offset;
    mmap.put("zongIdStr", zongIdStr);

    String localTime = ZoneUtils.getTimeFormart(zongIdStr, currentTimeMillis);
    mmap.put("localTime", localTime);
    
    return prefix + "/globaldetail";
}

前端页面使用 Thymeleaf 解析变量并展示对比：

<table>
    <tbody>
        <tr><td>经度</td><td>[[${lng}]]</td></tr>
        <tr><td>纬度</td><td>[[${lat}]]</td></tr>
        <tr><td>北京时间</td><td>[[${beijingTime}]] &nbsp;【UTC+8 】</td></tr>
        <tr><td>当地时间</td><td>[[${localTime}]] &nbsp;【[[${zongIdStr}]]】</td></tr>
    </tbody>
</table>

效果验证

启动项目后，在不同区域点击测试，响应迅速且时间显示符合预期。

亚洲地区

• 点击中国北京：显示东八区标准时间。
• 点击日本东京：显示东九区时间，时差 1 小时。

欧洲地区

• 点击英国伦敦：显示零时区或夏令时时间。
• 点击法国巴黎：显示东一区时间，匹配无误。

拉美与澳洲地区

• 巴西里约显示西三区，墨西哥城显示西七区。
• 澳大利亚悉尼显示东十区，新西兰奥克兰显示东十二区。

总结

本项目通过 Leaflet 与 SpringBoot 技术栈，完整实现了地图任意点位点击查看当地时间的功能。核心完成了三大模块：

1. 基于 Leaflet 实现世界地图加载与点位点击交互；
2. 依托 Java 语言解决经纬度转时区的核心难题，保证时间精准性；
3. 通过前后端接口实现数据交互，架构清晰、易于扩展。

该方案可直接应用于跨境系统、可视化大屏、物流地图等场景，也可在此基础上扩展历史时间查询、多语言展示等功能。