英文:
GoogleMap API with Java/Springboot and Thymeleaf receiving the coordenates but not creating the map
问题
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));
请注意，翻译可能会因格式限制而略有不同。如果您需要进一步的帮助，请随时提问。
英文:
I'm creating a web aplication in JAVA/SPRING/HTML5 with Thymeleaf that makes a map with markers based on a H2 Database with latitude and longitude of all customers. I was successful in the backend x front integration. The Java controller send a object to HTML page with Thymeleaf, that page import a javascript file with a google map generate function, consuming the object and executing the function. But the problem is: the map do not generate on the page
I debug the code and dont figure out whats the problem.
HTML CODE (I reduce the code to focus on the problem):
<!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 CODE:
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))
I print the 'lat' and 'lng' variables in console and they are ok. Im not a expert in javascript and english, so excuse-me whatever not good pratice.
答案1
得分: 1
你尝试过 $( document ).ready() 吗？当你调用 initMap(parseFloat(lat), parseFloat(lng)) 时，DOM 可能尚未渲染出你的地图元素。
英文:
Have you tried $( document ).ready() ? The DOM may not render your map element when you call initMap(parseFloat(lat), parseFloat(lng))
答案2
得分: 0
似乎是一个样式问题。地图没有渲染出来，我尝试将<div id="map">中的高度和宽度从100％更改为500像素，然后地图就显示出来了。所以，上面的代码确实实现了它的目的，如果进行了更改。当然有更好的做法，但为了教学方式，我认为这是一个有效的贡献。感谢大家的帮助。
英文:
Appears to be a style problem. How was not renderizing the map, i tryed to change the height and witdh of 100% to 500px in <div id="map">, and the maps showed up. So, the code above really attends its purpose, if the change are make. Sure there is better prattices, but for didatic way i think its a valid contribution. Thanks for the help guys.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论