使用 Google Maps V3 使用非重复地图填充容器答案

【问题标题】：Fill container with non-repeating map with Google Maps V3使用 Google Maps V3 使用非重复地图填充容器
【发布时间】：2016-02-05 07:36:06
【问题描述】：

我发现有几个人在这里问这个问题，但答案都有一个没有填满 100% 屏幕的地图，所以如果你缩小它不会重复，但你会在上面看到灰色条/在地图下方。

如果您访问 maps.google.com，无论您缩小多远，无论您的窗口有多宽或多高，地图总是会填满屏幕并且从不 em> 重复。我不知道如何使用 Google Maps JS API 做到这一点，而且我在 StackOverflow 上找不到任何关于这种确切行为的信息。

对于视觉效果，这是来自 Google 地图 API 的默认行为 (afaik)：

这里是 maps.google.com，屏幕大小相同，并尽可能缩小

如果您使窗口更宽，Google 地图的网站似乎会调整地图的大小以始终保持 100% 宽/高，这样就不会发生间隙和重复。我该怎么做？

【问题讨论】：

它们似乎可以防止用户进一步缩小。检查第二张图片上的地图，印度是不可见的，因此，地图的完整视图不可见（水平和垂直两侧）。
是的，由于任意窗口尺寸，它不能总是完美地适合它，但它尽可能地适合它。这就像 CSS 的封面属性。如果可以的话，它适合它在窗口内，但如果不能，它会流血一点

标签： javascript google-maps google-maps-api-3

【解决方案1】：

您可以根据地图的大小计算 minZoom。

minZoom 是：

mapWidth<=256:0
mapWidth<=512:1
mapWidth<=1024:2
mapWidth<=2048:3

公式：

Math.ceil(Math.log(map.getDiv().offsetWidth/256)/Math.log(2))

可能的实现（包括重新居中地图）

google.maps.event.addDomListener(window,'resize',function(){

  if(map.get('bounds_listener')){
    google.maps.event.removeListener(map.get('bounds_listener'));
  }
  else{
    map.set('_center',map.getCenter());
  }

  map.setOptions({
    minZoom: Math.ceil(Math.log(map.getDiv().offsetWidth/256)/Math.log(2))
  });

  map.setCenter(map.get('_center'));

  map.set('bounds_listener', google.maps.event.addListener(map, 'bounds_changed', function(){
     this.set('_center',this.getCenter());
  }));
});

//trigger resize to set initial value
google.maps.event.trigger(window,'resize');

【讨论】：