谷歌地图API V3缩放级别匹配视口大小？

Question

我目前正在制作一个响应式网站，其中包含一个页面宽的div框，其中包含一个Google地图。由于显示宽度（和高度）会变化，因此我需要设置与宽度320不同的缩放级别，就像在1200+时一样。调整大小不是问题，居中也不是问题。

我的目标是随着视口的变化而调整缩放级别，可以通过将不同的缩放级别设置为特定屏幕分辨率或从最小到最大缩放来实现。

我认为这篇Stackoverflow上的帖子几乎是相同的问题，但没有解决方案。任何想法都非常欢迎！

- gfaw

---

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

Answer 1

确实是一个棘手的问题。最好在调整大小事件处理程序中设置一个计时器，因为该事件可能会频繁触发。

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 示例

- Chad Killingsworth

Answer 2

你需要窗口的边界框，即角落坐标。然后可以使用墨卡托投影来计算x和y比例：将纬度/经度转换为像素坐标？。然后可以将比例乘以缩放级别并检查最小和最大值。

- Micromega