谷歌地圖沒有顯示（春天，Maven，Thymeleaf，SalesPoint）

我目前正在與Thymeleaf的Spring項目中的谷歌地圖上工作。我想顯示一張地圖，用戶可以拖動標記並設置新位置。但地圖沒有顯示。如果我在一個正常的html文件中嘗試它的工作正常。下面是代碼：谷歌地圖沒有顯示（春天，Maven，Thymeleaf，SalesPoint）

所有的

<!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>

來源

2016-11-22 Julian Hinrichs

，如果你使用的是Chrome，任何錯誤控制檯？ –

是顯示「SensorNotRequired」。我會很快嘗試沒有傳感器。謝謝！ –

這是一個警告。這與這個問題無關。 –

首先，檢查<div th:id="mapCanvas"></div>正確渲染<div id="mapCanvas"></div>。

如果是這樣的話，你是否在div2的div的寬度和高度在stylecreate.css中設置了mapCanvas？空divs通常有0高度，所以地圖不會顯示出來。您必須始終在<div>上明確設定高度[1]。

添加以下行在你的CSS：

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

來源

2016-11-25 15:11:14 jbern

谷歌地圖沒有顯示（春天，Maven，Thymeleaf，SalesPoint）

回答

相關問題