谷歌地圖在縮放圓圈時未正確居中

Question

我一直試圖讓我的頭在這個問題上花費數小時 - 目前爲止沒有結果，所以我現在轉向您。

我在我的網站中嵌入了谷歌地圖。然後我給了div 100％的邊界半徑，以使地圖看起來是圓形的。到現在爲止還挺好。

但是，當我想讓圓形可縮放/響應時，我嘗試使用舊的填充底部css-hack，這是我在很久以前發現的here on stack overflow。由於這個技巧，圓形地圖現在可以很好地縮放。

但是，這也似乎設置了偏離中心的地圖，我不知道爲什麼或來修復。我真的很期待這裏的任何解決方案...

最好的問候，

月

我有以下a fiddle demonstrating the issue here（有完整的HTML/JS/CSS）CSS：

.cms-map-wrapper.circular { 
    width: 50%; 
    margin: auto; 
    background-color:red; 
} 

.cms-map { 
     border: solid 5px blue; 
     border-radius: 100%; 
     padding-bottom: 100%; 
     margin-bottom: 20px; 
} 

Answer 1

這是一個計時問題。解決它的一個選擇是延遲，然後觸發調整大小事件並重置地圖中心。

setTimeout(function() { 
      google.maps.event.trigger(map, 'resize'); 
      map.setCenter(position); 
     }, 100); 

proof of concept fiddle

工作代碼片段：

function showMapWithAddress(mapElementId, address) { 
 

 
    geocoder = new google.maps.Geocoder(); 
 
    geocoder.geocode({ 
 
    'address': address 
 
    }, function(results, status) { 
 

 
    if (status == google.maps.GeocoderStatus.OK) { 
 
     position = results[0].geometry.location; 
 

 
     var mapProp = { 
 
     center: position, 
 
     zoom: 14 
 
     }; 
 

 
     var map = new google.maps.Map(document.getElementById(mapElementId), mapProp); 
 
     google.maps.event.addDomListener(window, 'resize', function() { 
 
     google.maps.event.trigger(map, 'resize'); 
 
     map.setCenter(position); 
 
     }); 
 
     var marker = new google.maps.Marker({ 
 
     position: position, 
 
     title: address, 
 
     flat: true, 
 
     clickable: false 
 
     }); 
 

 
     marker.setMap(map); 
 
     setTimeout(function() { 
 
     google.maps.event.trigger(map, 'resize'); 
 
     map.setCenter(position); 
 
     }, 100); 
 
    } else { 
 
     console.log('Geocode was not successful for the following reason: ' + status); 
 
    } 
 
    }); 
 
} 
 

 
showMapWithAddress('googleMap', 'Josef-Bautz-Strasse 14, 63457 Hanau, Germany');

.cms-map-wrapper.circular { 
 
    width: 50%; 
 
    margin: auto; 
 
    background-color: red; 
 
} 
 
.cms-map { 
 
    border: solid 5px blue; 
 
    border-radius: 100%; 
 
    padding-bottom: 100%; 
 
    margin-bottom: 20px; 
 
}

<script src="http://maps.googleapis.com/maps/api/js"></script> 
 
<div class="cms-map-wrapper circular"> 
 
    <div id="googleMap" class="cms-map"></div> 
 
</div>