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的任何缩放事件。