Javascript GoogleMap API,Java/Springboot和Thymeleaf接收coordenates,但不创建地图
我正在用Thymeleaf在JAVA/SPRING/HTML5中创建一个web应用程序,它基于H2数据库创建一个带有标记的地图,其中包含所有客户的纬度和经度。我在后端x前端集成方面取得了成功。Java控制器使用Thymeleaf将对象发送到HTML页面,该页面使用google map generate函数导入javascript文件,使用该对象并执行该函数。但是问题是:地图不会在页面上生成 我调试代码,不知道问题出在哪里 HTML代码(我减少代码以关注问题):Javascript GoogleMap API,Java/Springboot和Thymeleaf接收coordenates,但不创建地图,javascript,java,jquery,spring-boot,thymeleaf,Javascript,Java,Jquery,Spring Boot,Thymeleaf,我正在用Thymeleaf在JAVA/SPRING/HTML5中创建一个web应用程序,它基于H2数据库创建一个带有标记的地图,其中包含所有客户的纬度和经度。我在后端x前端集成方面取得了成功。Java控制器使用Thymeleaf将对象发送到HTML页面,该页面使用google map generate函数导入javascript文件,使用该对象并执行该函数。但是问题是:地图不会在页面上生成 我调试代码,不知道问题出在哪里 HTML代码(我减少代码以关注问题): 我在控制台中打印“lat”和“ln
我在控制台中打印“lat”和“lng”变量,它们都正常。我不是javascript和英语方面的专家,所以请原谅我做的不好。你试过
$(document).ready()
?调用initMap(parseFloat(lat)、parseFloat(lng))时,DOM可能不会呈现map元素。
似乎是样式问题。在没有渲染地图的情况下,我尝试在
中将100%的高度和witdh更改为500px,然后地图出现了。因此,如果进行了更改,那么上面的代码确实达到了它的目的。当然还有更好的实践,但对于didatic方式,我认为这是一个有效的贡献。感谢大家的帮助。令人惊讶的是,在我回忆起在黑夜中哭泣的情景后,我将高度改为100像素,而不是100%的值,地图看起来很完美。你能相信吗?哈哈,你不会想到的
<!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>
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))