我有一组点,我想在嵌入式谷歌地图(API v3)上绘制。我希望边界容纳所有的点,除非缩放级别太低(即,缩小太多)。我的方法是这样的:

var bounds = new google.maps.LatLngBounds();

// extend bounds with each point

gmap.fitBounds(bounds); 
gmap.setZoom( Math.max(6, gmap.getZoom()) );

这行不通。最后一行“gmap.setZoom()”如果在fitBounds之后直接调用,则不会改变地图的缩放级别。

有没有一种方法来获得缩放级别的边界而不应用到地图?还有其他解决方法吗?


当前回答

为了配合另一个解决方案-我发现“监听bounds_changed事件,然后设置新的缩放”方法对我来说并不可靠。我认为我有时在地图已经完全初始化之前调用fitBounds,初始化导致一个bounds_changed事件,将使用侦听器,在fitBounds改变边界和缩放级别之前。我最终得到了这段代码,到目前为止似乎还可以工作:

// If there's only one marker, or if the markers are all super close together,
// `fitBounds` can zoom in too far. We want to limit the maximum zoom it can
// use.
//
// `fitBounds` is asynchronous, so we need to wait until the bounds have
// changed before we know what the new zoom is, using an event handler.
//
// Sometimes this handler gets triggered by a different event, before
// `fitBounds` takes effect; that particularly seems to happen if the map
// hasn't been fully initialized yet. So we don't immediately remove the
// listener; instead, we wait until the 'idle' event, and remove it then.
//
// But 'idle' might happen before 'bounds_changed', so we can't set up the
// removal handler immediately. Set it up in the first event handler.

var removeListener = null;
var listener = google.maps.event.addListener(map, 'bounds_changed', () => {
  console.log(map.getZoom());
  if (map.getZoom() > 15) {
    map.setZoom(15);
  }

  if (!removeListener) {
    removeListener = google.maps.event.addListenerOnce(map, 'idle', () => {
      console.log('remove');
      google.maps.event.removeListener(listener);
    });
  }
});

其他回答

像我一样,如果你不愿意和听众一起玩,这是我想出的一个简单的解决方案: 在地图上添加一个方法,严格按照你的要求工作,像这样:

    map.fitLmtdBounds = function(bounds, min, max){
        if(bounds.isEmpty()) return;
        if(typeof min == "undefined") min = 5;
        if(typeof max == "undefined") max = 15;

        var tMin = this.minZoom, tMax = this.maxZoom;
        this.setOptions({minZoom:min, maxZoom:max});
        this.fitBounds(bounds);
        this.setOptions({minZoom:tMin, maxZoom:tMax});
    }

那么你可以调用map.fitLmtdBounds(bounds)而不是map.fitBounds(bounds)来设置定义的缩放范围下的边界…或者map.fitLmtdBounds(bounds,3,5)来覆盖缩放范围..

我已经多次访问这个页面来获得答案,虽然所有现有的答案都非常有用,但它们并不能完全解决我的问题。

google.maps.event.addListenerOnce(googleMap, 'zoom_changed', function() {
    var oldZoom = googleMap.getZoom();
    googleMap.setZoom(oldZoom - 1); //Or whatever
});

基本上,我发现“zoom_changed”事件阻止了UI的地图从“跳过”,这发生在我等待“空闲”事件。

希望这能帮助到一些人!

为了配合另一个解决方案-我发现“监听bounds_changed事件,然后设置新的缩放”方法对我来说并不可靠。我认为我有时在地图已经完全初始化之前调用fitBounds,初始化导致一个bounds_changed事件,将使用侦听器,在fitBounds改变边界和缩放级别之前。我最终得到了这段代码,到目前为止似乎还可以工作:

// If there's only one marker, or if the markers are all super close together,
// `fitBounds` can zoom in too far. We want to limit the maximum zoom it can
// use.
//
// `fitBounds` is asynchronous, so we need to wait until the bounds have
// changed before we know what the new zoom is, using an event handler.
//
// Sometimes this handler gets triggered by a different event, before
// `fitBounds` takes effect; that particularly seems to happen if the map
// hasn't been fully initialized yet. So we don't immediately remove the
// listener; instead, we wait until the 'idle' event, and remove it then.
//
// But 'idle' might happen before 'bounds_changed', so we can't set up the
// removal handler immediately. Set it up in the first event handler.

var removeListener = null;
var listener = google.maps.event.addListener(map, 'bounds_changed', () => {
  console.log(map.getZoom());
  if (map.getZoom() > 15) {
    map.setZoom(15);
  }

  if (!removeListener) {
    removeListener = google.maps.event.addListenerOnce(map, 'idle', () => {
      console.log('remove');
      google.maps.event.removeListener(listener);
    });
  }
});

我所做的就是:

map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));

它适用于V3 API。

我有同样的问题,我能够解决它使用下面的代码。这个监听器(google.maps.addListenerOnce())事件只会在map.fitBounds()执行之后被触发一次。所以,没有必要

跟踪并手动删除侦听器,或者 等待地图空闲。

它最初设置适当的缩放级别,并允许用户放大和缩小超过初始缩放级别,因为事件侦听器已经过期。例如,如果只调用google.maps.addListener(),那么用户将永远无法放大超过指定的缩放级别(在本例中为4)。由于我们实现了google.maps.addListenerOnce(),用户将能够放大到他/她选择的任何级别。

map.fitBounds(bounds);

var zoom_level_for_one_marker = 4;

google.maps.event.addListenerOnce(map, 'bounds_changed', function(event){
   if (this.getZoom() >= zoom_level_for_one_marker){  
       this.setZoom(zoom_level_for_one_marker) 
   }
});