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缩放级别匹配视口大小？

回答

相关问题