3

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

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

我认为Stackoverflow 上的这篇文章几乎是关于同样的问题，但没有解决方案。任何想法都非常感谢！

4

2 回答 2

0

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

于 2013-11-04T18:51:07.973 回答
0

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

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

于 2013-11-04T23:11:38.467 回答