带有 Java/Springboot 和 Thymeleaf 的 GoogleMap API

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


我调试代码,但没有弄清楚问题出在哪里。


HTML代码(我减少了代码以关注问题):


<!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 和英语方面的专家,所以请原谅我任何不好的做法。


largeQ
浏览 214回答 2
2回答

Helenr

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

一只甜甜圈

看起来是样式问题。如何不渲染地图,我尝试将 100% 的高度和宽度更改为 500px&nbsp;<div id="map">,然后地图出现了。因此,如果进行了更改,上面的代码确实达到了它的目的。当然有更好的做法,但对于教学方式,我认为这是一个有效的贡献。感谢您的帮助。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript