Google Maps API V3 缩放级别匹配视口大小？答案

【问题标题】：Google Maps API V3 Zoom level matching viewport size?Google Maps API V3 缩放级别匹配视口大小？
【发布时间】：2013-11-04 17:39:29
【问题描述】：

我目前正在开发一个响应式网站，其页面范围的 div 框包含 Google 地图。随着显示宽度（和高度）的变化，我需要在宽度 320 处设置不同的缩放级别，就像在 1200+ 处所做的那样。调整大小不是问题，也不是居中问题。

我想要实现的是随着视口的变化调整缩放级别，或者通过设置与某些屏幕分辨率相对应的不同缩放级别，或者从最小到最大缩放。

我认为this post on Stackoverflow 几乎是同一个问题，但没有解决方案。任何想法都非常感谢！

【问题讨论】：

您需要定义您想要保持不变的内容（或至少尽可能保持不变）。你在地图上有一个你总是希望可见的界限吗？如果是这样，将其定义为 google.maps.LatLngBounds 并使用 google.maps.Map.fitBounds 方法。

标签： javascript google-maps-api-3 responsive-design zooming

【解决方案1】：

您需要边界框，即窗户的角落。然后您可以使用墨卡托投影来计算 x 和 y 比率：Convert lat/lon to pixel coordinate?。然后您可以将比率乘以缩放级别并检查最小值和最大值。

【讨论】：

【解决方案2】：

确实是个棘手的问题。最好在 resize 事件处理程序中设置一个计时器，因为该事件会触发很多次。

var zoomLevelSizes = [
  {triggerWidth: 10000, zoomLevel: 9 },
  {triggerWidth: 720, zoomLevel: 8 },
  {triggerWidth: 320, zoomLevel: 7 }
];

var resizeTimeout = -1;
function handleResizeEvent() {
  resizeTimeout = -1;
  var width = window.innerWidth;
  for(var i = zoomLevelSizes.length - 1; i >= 0; i--) {
    if(width < zoomLevelSizes[i].triggerWidth) {
      if(map.getZoom() > zoomLevelSizes[i].zoomLevel) {
        map.setZoom(zoomLevelSizes[i].zoomLevel);
        console.log('changed to zoom level ' + zoomLevelSizes[i].zoomLevel);
        break;
      }
    }
  }
}
handleResizeEvent()

//Can't do anything resource intensive here as this can get triggered a lot
google.maps.event.addDomListener(window, 'resize', function() {
  if(resizeTimeout !== -1) {
    clearTimeout(resizeTimeout);
  }
  resizeTimeout = setTimeout(handleResizeEvent, 500);
});

JSFiddle example

【讨论】：