Google地图在缩放圈中没有正确地对中

Question

几个小时以来，我一直在努力解决这个问题--到目前为止还没有结果，所以我现在转向你。

我已经在我的网站嵌入谷歌地图。然后，我给div的边界半径为100%，以使地图看起来是圆形的。到现在为止还好。

但是当我想让圆圈扩展/响应时，我尝试使用我很久以前就发现的旧的填充底部css-hack。多亏了这个技巧，圆形地图现在的比例尺非常好。

然而，这似乎也使地图偏离了中心，我无法弄清楚原因，也无法解决问题。我真的很期待这里的任何解决方案。

诚挚的问候,

1月

我有在这里演示这个问题的小提琴 (包含完整的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);

概念小提琴的证明

工作代码片段：

​

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>

​