谷歌地图在缩放圈中没有正确居中

Question

我已经努力解决这个问题几个小时了 - 到目前为止没有结果，所以我现在求助于你。

我在我的网站中嵌入了谷歌地图。然后我给 div 一个 100% 的边界半径，以使地图看起来是圆形的。到目前为止，一切顺利。

但是当我想让圆圈可扩展/响应时，我尝试使用我多年前发现的旧的 padding-bottom 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

工作代码sn-p：

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>