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

我目前正在使用包含Google地圖的全網頁div盒的響應式網站。由於顯示寬度（和高度）的變化，我需要在寬度320處設置不同的縮放級別，就像我在1200+時所做的那樣。調整大小不是問題，也不是集中。Google Maps API V3縮放級別匹配視口大小？

我想要實現的是通過設置與某些屏幕分辨率對應的不同縮放級別或從最小到最大縮放的某些內容，隨着視口更改而調整的縮放級別。

我認爲this post on Stackoverflow幾乎是相同的問題，但沒有解決方案。任何想法非常感謝！

來源

2013-11-04 gfaw

您需要定義你想成爲恆定的（或至少儘可能恆定）是什麼。你有沒有在地圖上的界限，你總是想看到？如果是這樣，請將其定義爲google.maps.LatLngBounds並使用google.maps.Map.fitBounds方法。 – geocodezip

你需要邊界框，窗戶的角落。然後，您可以使用墨卡託投影計算x和y比率：Convert lat/lon to pixel coordinate?。然後，您可以將比率與縮放級別相乘並檢查最小值和最大值。

來源

2013-11-04 18:51:07 Bytemain

確實是棘手的問題。最好在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

來源

2013-11-04 23:11:38

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

回答

相關問題