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

2. Leaflet 实现地图点击

前端引入 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);

需要注意的是，页面开发时需确保引入 Layui 依赖资源，以保证弹窗功能正常。

3. 前后台交互

后端 Controller 主要负责页面跳转以及时区时间信息展示。在实现具体时区展示时，自动计算时间信息，并与北京时间进行对比。

/**
 * 全球信息可视化，集成北京时间、当地时间、所属时区
 */
@RequiresPermissions("eq:capital:globalinfo")
@GetMapping("/globalinfo")
public String globalinfo() {
    return prefix + "/globalinfo";
}

/**
 * 全球信息可视化，集成北京时间、当地时间、所属时区
 */
@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>

效果验证

启动 SpringBoot 项目，访问前端页面，在全球不同区域点击测试，响应速度快，时间准确。

亚洲地区

• 点击中国北京：弹出东八区标准时间，与时区完全匹配。
• 点击日本东京：显示东九区时间，时差 1 小时，结果精准。

欧洲地区

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

拉美地区

• 点击巴西里约：显示西三区时间，符合南美时区规则。
• 点击墨西哥城：显示西七区时间，计算结果无偏差。

澳洲地区

• 点击澳大利亚悉尼：显示东十区时间。
• 点击新西兰奥克兰：显示东十二区时间，跨区域计算精准。

总结

本文通过 Leaflet + SpringBoot 技术栈，完整实现了「地图任意点位点击查看当地时间」功能。核心完成了三大模块开发：

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

本项目可直接应用于跨境系统、可视化大屏、物流地图、国际业务平台等场景，也可在此基础上扩展历史时间查询、时区对比、多语言展示等功能。Leaflet 轻量化的特性搭配 SpringBoot 高效的后端能力，是中小型 Web 地图项目的最佳实践之一。