带有 Java/Spring Boot 和 Thymeleaf 的 Google Map API 接收坐标但不创建地图

Posted 2023-02-26

技术标签:

【中文标题】带有 Java/Spring Boot 和 Thymeleaf 的 Google Map API 接收坐标但不创建地图【英文标题】：GoogleMap API with Java/Springboot and Thymeleaf receiving the coordenates but not creating the map 【发布时间】：2020-11-13 21:21:17 【问题描述】：

我正在使用 Thymeleaf 在 JAVA/SPRING/html5 中创建一个 Web 应用程序，该应用程序基于 H2 数据库制作带有标记的地图，其中包含所有客户的纬度和经度。我在后端 x 前端集成中取得了成功。 Java 控制器使用 Thymeleaf 向 HTML 页面发送一个对象，该页面导入一个带有谷歌地图生成功能的 javascript 文件，使用该对象并执行该功能。但是问题是：页面上没有生成地图

我调试了代码，不知道是什么问题。

HTML CODE（我减少代码以集中解决问题）：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Mapa do cliente</title>
</head>
<body>
        <div class="mapa"
            th:attr="data-latitude=$customer.latitude,data-longitude=$customer.longitude"
            id="map" style="width: 100%; height: 100%"></div>
    <script src="https://jquery.gocache.net/jquery-3.5.1.min.js"
        type="text/javascript"></script>
    <script src="/webjars/bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=&v=weekly"></script>
    <script src="/js/mapFunctions.js"
        type="text/javascript"></script>

</body>
</html>

JAVASCRIPT 代码：

let map;
var lat = $('.mapa').attr('data-latitude')
var lng = $('.mapa').attr('data-longitude')
    function initMap(lat, lng) 
            map = new google.maps.Map(document.getElementById("map"), 
                center:  lat, lng ,
                zoom: 8
            );
        
initMap(parseFloat(lat), parseFloat(lng))

我在控制台中打印了 'lat' 和 'lng' 变量，它们没问题。我不是 javascript 和英语方面的专家，所以请原谅我有什么不好的做法。

【问题讨论】：

【参考方案1】：

似乎是样式问题。怎么没有渲染地图，我尝试在<div id="map"> 中将高度和宽度的 100% 更改为 500px，地图出现了。因此，如果进行更改，上面的代码确实达到了它的目的。当然有更好的实践，但对于教学方式，我认为这是一个有效的贡献。谢谢大家的帮助。

【讨论】：

【参考方案2】：

你试过$( document ).ready() 吗？当您调用initMap(parseFloat(lat), parseFloat(lng))时，DOM 可能不会呈现您的地图元素

【讨论】：

令人惊讶的是，虽然Link，在漆黑的夜晚哭泣之后，我将高度改为100px而不是100%的值，并且地图看起来完美显示。你能相信吗？哈哈不会看到这种情况发生

以上是关于带有 Java/Spring Boot 和 Thymeleaf 的 Google Map API 接收坐标但不创建地图的主要内容，如果未能解决你的问题，请参考以下文章

无法在 Java Spring Boot / Angular 应用程序中获取 cookie

Java Spring Boot 加 Spring Batch 创建 Jar 并仅运行特定作业