谷歌地图v3:执行分钟.使用fitBounds时缩放级别

chr*_*ris 72 javascript google-maps google-maps-api-3 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);
Run Code Online (Sandbox Code Playgroud)

这样做可以确保地图上始终显示适当的详细程度.

我试图在v3中复制此功能,但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);
Run Code Online (Sandbox Code Playgroud)

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

小智 128

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

在关于Google Groups的讨论中,我发现基本上当你执行fitBounds时,缩放是异步发生的,所以你需要捕获缩放和边界变化事件.最后一篇文章中的代码通过一个小修改为我工作......因为它可以阻止你完全缩放大于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);
Run Code Online (Sandbox Code Playgroud)

希望有所帮助,

安东尼.

  • 使用`google.maps.event.addListenerOnce()`,这样您就不必在之后手动删除监听器. (21认同)
  • 因为我第三次看这个,这是高尔夫版本.谢谢@pstadler.`google.maps.event.addListenerOnce(map,'bounds_changed',function(){this.setZoom(Math.min(15,this.getZoom()));});` (5认同)
  • 这是一个很好的方法.另一种方法是检查当前边界并扩展边界,即http://stackoverflow.com/questions/3334729/google-maps-v3-fitbounds-zoom-too-close-for-single-marker/5345708#5345708 .虽然这里的链接答案只是通过分数扩展边界,但您可以使用相同的方法将边界扩大一个更大的数字; 我发现在所有角落增加7个做得很好. (3认同)
  • 我想纠正我之前的评论.我认为可能需要设置initialZoom属性.在忽略了部分代码后,我在IE 9上真正关闭时遇到了一些麻烦......很酷的解决方案! (2认同)
  • 使用 addLIstenerOnce 时,您可以简单地监听“zoom_changed”。我在“map.fitBounds(bounds);”之前使用“zoom_changed”,并且似乎在 Chrome 上工作得很好。 (2认同)

Fly*_*ing 59

没有尝试,我会说你应该能够fitBounds()在你获得缩放级别之前完成它,即

map.fitBounds(bounds);
var zoom = map.getZoom();
map.setZoom(zoom > 6 ? 6 : zoom);
Run Code Online (Sandbox Code Playgroud)

如果你做了尝试,并没有工作,你可以设置你的地图minZoomMapOptions (API参考)如下:

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

这将使地图在使用时不再进一步缩放fitBounds().

  • 所以基本上和我在答案中写的完全一样? (5认同)
  • 设置minZoom和maxZoom值会限制用户缩放超出这些值,所以如果您想要做的就是将初始缩放设置为合理的值(这是我认为OP正在讨论的内容),这无济于事 (3认同)

Ang*_*Dan 16

安东尼的解决方案非常好.我只需要修复初始页面加载的缩放(确保你没有太大的放大以开始)这对我有用:

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 );
Run Code Online (Sandbox Code Playgroud)

  • 您可以使用`addListenerOnce`而不是删除侦听器,但我正在使用此解决方案. (5认同)

Joo*_*ost 14

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

if(!bounds.isEmpty()) {
    var originalMaxZoom = map.maxZoom;
    map.setOptions({maxZoom: 18});
    map.fitBounds(bounds);
    map.setOptions({maxZoom: originalMaxZoom});
}
Run Code Online (Sandbox Code Playgroud)


Mar*_*rom 11

当您在一个项目上调用map.fitBounds()时,地图可能会过于放大.要解决此问题,只需将'maxZoom'添加到mapOptions ...

var mapOptions = {
  maxZoom: 15
};
Run Code Online (Sandbox Code Playgroud)


ouc*_*cil 7

在我的情况下,我只想将缩放级别设置为比google maps在fitBounds中为我选择的缩放级别少一个.目的是使用fitBounds,但也确保没有标记在任何地图工具下等.

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

这是在最初创建地图对象的初始块中...

var mapZoom = null;
Run Code Online (Sandbox Code Playgroud)

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

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

在没有检查的情况下使用'bounds_changed'时,无论是否需要,地图都会针对每个标记缩小一次.相反,当我使用'zoom_changed'时,我有时会在地图工具下有标记,因为缩放实际上并没有改变.现在它始终被触发,但检查确保它只在需要时缩小一次.

希望这可以帮助.