Google Maps API V3縮放級別是否與視口大小匹配？

Question

我目前正在使用帶有Google地圖的全頁面div框在自適應網站上工作。 隨着顯示寬度（和高度）的變化，我需要像在1200+上一樣在寬度320上設置不同的縮放級別。 調整大小既不是問題，也不是中心。

我要實現的是根據視口的變化調整縮放級別，方法是通過設置與某些屏幕分辨率相對應的不同縮放級別，或者從最小縮放到最大縮放。

我認為關於Stackoverflow的這篇文章幾乎是關於同一問題的，但沒有解決方案。 任何想法，不勝感激！

Answer 1

您需要邊界框，即窗口的角。 然后，您可以使用墨卡托投影來計算x和y比率： 將經/緯度轉換為像素坐標？ 。 然后，您可以將比例乘以縮放級別，然后檢查最小和最大值。

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