我正在 JAVA/SPRING/HTML5 中使用 Thymeleaf 创建一个 Web 应用程序，该应用程序根据 H2 数据库制作带有标记的地图，其中包含所有客户的纬度和经度。我成功进行了后端x前端整合。 Java 控制器使用 Thymeleaf 将对象发送到 HTML 页面，该页面导入带有 google 地图生成功能的 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 和英语方面的专家，所以请原谅我任何不好的做法。
你有没有尝试过$( document ).ready()？当您调用时，DOM 可能不会渲染您的地图元素initMap(parseFloat(lat), parseFloat(lng))
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
