谷歌地图：全屏+ fitBounds 不适合边界答案

【问题标题】：Google Maps: full screen + fitBounds does not fit bounds谷歌地图：全屏+ fitBounds 不适合边界
【发布时间】：2017-04-15 14:30:12
【问题描述】：

我有一张显示带有markerClusterer 标记的地图。

在普通视图中一切正常，但在全屏模式下，单击集群会运行“fitBounds”，并且缩放未正确更改（发生缩小而不是放大）。

代码：

var mapOptions = {
    zoom: 17,
    minZoom: 4,
    maxZoom: 20,
    center: {lat: 0, lng: 0},
    fullscreenControl: true
}

var mcOptions = {
    gridSize: 20,
    styles: clusterStyles,
    maxZoom: 20
};

var bounds = new google.maps.LatLngBounds();

function initialize(itensJSON){

    var map = new google.maps.Map(document.getElementById("map"), mapOptions);

    $.each(itensJSON, function (i, item) {
        var marker = new google.maps.Marker({
            position: item.location,
            id: item.id
        });
        markers.push(marker);
        bounds.extend(marker.getPosition());
    });

    map.fitBounds(bounds);
    markerClusterer = new MarkerClusterer(map, markers, mcOptions);
}

html:

<div id="map_container" style="position: absolute; width: 100%; height: 80%;">
      <div id="map" style="width: 100%; height: 100%">
      </div>
  </div>

当在 markerclusterer.js 的 'triggerClusterClick' 中运行 fitbounds 时，会发生缩小而不是放大：

ClusterIcon.prototype.triggerClusterClick = function(event) {
  var markerClusterer = this.cluster_.getMarkerClusterer();

  // Trigger the clusterclick event.
  google.maps.event.trigger(markerClusterer, 'clusterclick', this.cluster_, event);

  if (markerClusterer.isZoomOnClick()) {
    // Zoom into the cluster.
    this.map_.fitBounds(this.cluster_.getBounds());
  }
};

有人知道发生了什么吗？

PS：全屏切换是通过“fullscreenControl”（在选项映射中启用）进行的

有问题的示例：fiddle

【问题讨论】：

请提供一个minimal reproducible example 来证明这个问题。

标签： google-maps-api-3 markerclusterer fitbounds

【解决方案1】：

在 div 地图的高度中使用“% 度量”时会出现问题

我这样解决问题：

html, body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

解决方案示例：fiddle

【讨论】：