Google地图v3:实施分钟。 使用fitBounds时缩放级别

我在地图上绘制了一系列标记(使用地图API的v3)。

在v2中,我有以下代码:

bounds = new GLatLngBounds(); ... loop thru and put markers on map ... bounds.extend(point); ... end looping map.setCenter(bounds.getCenter()); var level = map.getBoundsZoomLevel(bounds); if ( level == 1 ) level = 5; map.setZoom(level > 6 ? 6 : level); 

这样做的好处是确保地图上始终显示适当的详细程度。

我试图在V3中复制这个function,但setZoom和fitBounds似乎没有合作:

 ... loop thru and put markers on the map var ll = new google.maps.LatLng(p.lat,p.lng); bounds.extend(ll); ... end loop var zoom = map.getZoom(); map.setZoom(zoom > 6 ? 6 : zoom); map.fitBounds(bounds); 

我尝试了不同的排列(例如,在setZoom之前移动fitBounds),但是我用setZoom做的事情似乎并没有影响到地图。 我错过了什么吗? 有没有办法做到这一点?

我碰巧正在寻找同样的东西:)

在Google Groups上的这个讨论中,我发现基本上当你做一个fitBounds的时候,缩放是“asynchronous”发生的,所以你需要捕捉缩放和边界改变事件。 最后一篇文章中的代码对我进行了小小的修改……因为它阻止了你完全缩小到15以上,所以使用第四篇文章中的想法来设置标志只在第一次。

 // Do other stuff to set up map var map = new google.maps.Map(mapElement, myOptions); // This is needed to set the zoom after fitbounds, google.maps.event.addListener(map, 'zoom_changed', function() { zoomChangeBoundsListener = google.maps.event.addListener(map, 'bounds_changed', function(event) { if (this.getZoom() > 15 && this.initialZoom == true) { // Change max/min zoom here this.setZoom(15); this.initialZoom = false; } google.maps.event.removeListener(zoomChangeBoundsListener); }); }); map.initialZoom = true; map.fitBounds(bounds); 

希望有所帮助,

安东尼。

没有尝试,我会说你应该能够做到这一点,只要有fitBounds()才能得到缩放级别,即

 map.fitBounds(bounds); var zoom = map.getZoom(); map.setZoom(zoom > 6 ? 6 : zoom); 

如果你确实尝试过,并且没有成功,你可以在MapOptions (api-reference)中用minZoom设置你的地图,像这样:

 var map = new google.maps.Map(document.getElementById("map"), { minZoom: 6 }); 

这将使地图在使用fitBounds()时不会进一步缩小。

安东尼的解决scheme是非常好的。 我只需要修改初始页面加载的缩放比例(确保你没有太大的放大能力),这对我来说是个窍门:

 var zoomChangeBoundsListener = google.maps.event.addListener(map, 'bounds_changed', function(event) { google.maps.event.removeListener(zoomChangeBoundsListener); map.setZoom( Math.min( 15, map.getZoom() ) ); }); map.fitBounds( zoomBounds ); 

您也可以在调用fitBounds()之前设置maxZoom选项,然后重置该值:

 if(!bounds.isEmpty()) { var originalMaxZoom = map.maxZoom; map.setOptions({maxZoom: 18}); map.fitBounds(bounds); map.setOptions({maxZoom: originalMaxZoom}); } 

当您在一个项目上调用map.fitBounds()时,地图可能会放大得太近。 要解决这个问题,只需将“maxZoom”添加到mapOptions …

 var mapOptions = { maxZoom: 15 }; 

就我而言,我只是想将缩放级别设置为小于Google地图在fitBounds中为我select的缩放级别。 目的是使用fitBounds,但也确保在任何地图工具下没有标记。

我的地图是早期创build的,然后页面的许多其他dynamic组件都有机会添加标记,每添加一次,都会调用fitBounds。

这是在地图对象最初创build的初始块…

 var mapZoom = null; 

然后,将其添加到添加标记的每个块中,就在调用map.fitBounds之前。

 google.maps.event.addListenerOnce(map, 'bounds_changed', function() { if (mapZoom != map.getZoom()) { mapZoom = (map.getZoom() - 1); map.setZoom(mapZoom); } }); 

如果在没有检查的情况下使用“bounds_changed”,则无论是否需要,地图都会缩小一次。 相反,当我使用“zoom_changed”时,我有时会在地图工具下面放置标记,因为缩放并没有真正改变。 现在它总是被触发,但检查确保它只在需要时才缩小一次。

希望这可以帮助。

由于Google Maps V3是由事件驱动的,因此您可以告诉API在zoom_changed事件触发时将缩放设置回合适的数量:

 var initial = true google.maps.event.addListener(map, "zoom_changed", function() { if (initial == true){ if (map.getZoom() > 11) { map.setZoom(11); initial = false; } } }); 

我使用initial来使地图在最终fitBounds被超载时不会缩小太多,而是让用户缩放他/她想要的大小。 没有这种情况,用户可能会有超过11的任何缩放事件。