Question

我目前正在使用Thymeleaf在Spring项目中处理Google Map。我想显示一个地图，用户可以拖放标记并设置新位置。但地图没有显示。如果我在普通的html文件中尝试它，它的工作正常。这是代码：

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/../resources/css/stylecreate.css" />
    <title>Festival erstellen</title>


    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <script th:inline="javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDuC0oHTI_mwfwW2HBiClpEuvSUKO7R8mg&amp;sensor=false"></script>

    <script th:inline="javascript">
        var geocoder = new google.maps.Geocoder();

        function geocodePosition(pos) {
         geocoder.geocode({
         latLng: pos
         }, function(responses) {
            if (responses and responses.length > 0) {
            updateMarkerAddress(responses[0].formatted_address);
         } else {
         updateMarkerAddress('Cannot determine address at this location.');
         }
        });
        }

        function updateMarkerStatus(str) {
            document.getElementById('markerStatus').innerHTML = str;
            }

        function updateMarkerPosition(latLng) {
            document.getElementById('info').innerHTML = [
                 latLng.lat(),
                 latLng.lng()
                 ].join(', ');
            }

        function updateMarkerAddress(str) {
            document.getElementById('address').innerHTML = str;
            }

        function initialize() {
            var latLng = new google.maps.LatLng(-34.397, 150.644);
            var map = new google.maps.Map(document.getElementById('mapCanvas'), {
             zoom: 8,
             center: latLng,
             mapTypeId: google.maps.MapTypeId.ROADMAP
            });
            var marker = new google.maps.Marker({
             position: latLng,
             title: 'Point A',
              map: map,
                 draggable: true
             });

        // Update current position info.

        updateMarkerPosition(latLng);
         geocodePosition(latLng);

        // Add dragging event listeners.

        google.maps.event.addListener(marker, 'dragstart', function() {
          updateMarkerAddress('Dragging...');
          });

        google.maps.event.addListener(marker, 'drag', function() {
         updateMarkerStatus('Dragging...');
         updateMarkerPosition(marker.getPosition());
         });

        google.maps.event.addListener(marker, 'dragend', function() {
         updateMarkerStatus('Drag ended');
        geocodePosition(marker.getPosition());
        });
        }

        // Onload handler to fire off the app.

                google.maps.event.addDomListener(window, 'load', initialize);
                 </script>


    </head>
<body>

    <div th:id="mapCanvas"></div>
  <div th:id="infoPanel">
<b>Marker status:</b>
<div th:id="markerStatus"><i>Click and drag the marker.</i></div>
<b>Current position:</b>
<div th:id="info"></div>
<b>Closest matching address:</b>
<div th:id="address"></div>
  </div>
</body>
</html>

Answer 1

首先，检查<div th:id="mapCanvas"></div>是否正确呈现<div id="mapCanvas"></div>。

如果是这样的话，你是否在stylecreate.css中设置了mapCanvas div的宽度和高度？空div通常具有0高度，因此地图不会显示。您必须始终在<div>明确[1]上设置一个高度。

在CSS中添加以下行：

#mapCanvas {
   width: 200px;        
   height: 200px;
}

Google地图未显示（Spring，Maven，Thymeleaf，SalesPoint）

1 个答案: