javascript 谷歌Mapv3:使用fitBounds时强制最小缩放级别

ldfqzlk8  于 2022-12-25  发布在  Java
关注(0)|答案(9)|浏览(274)

我正在Map上绘制一系列标记(使用maps 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);

这可以很好地确保Map上显示的细节总是适当的。
我尝试在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);

我尝试了不同的排列(例如,在setZoom之前移动fitBounds),但我对setZoom所做的任何操作似乎都不会影响贴图。我错过了什么吗?有什么方法可以做到这一点吗?

nnsrf1az

nnsrf1az1#

this discussion on 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);

安东尼。

wpx232ag

wpx232ag2#

如果不尝试它,我会说你应该能够做到这一点,只是有fitBounds()之前,你得到的缩放水平,即。

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

如果你尝试过但没有成功,你可以在MapOptions(api-reference)中使用minZoom来设置你的map,如下所示:

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

这将防止Map在使用fitBounds()时进一步缩小。

icnyk63a

icnyk63a3#

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

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

8tntrjer4#

Anthony的解决方案非常好,我只需要修改初始页面加载的缩放(确保你不会一开始就放大太多),这对我来说很管用:

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 );
pdsfdshx

pdsfdshx5#

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

var mapOptions = {
  maxZoom: 15
};
bxpogfeg

bxpogfeg6#

在我的例子中,我只是想将缩放级别设置为比谷歌Map在fitBounds中为我选择的缩放级别小一个,目的是使用fitBounds,但也要确保任何Map工具下都没有标记,等等。
我的Map创建得很早,然后页面的许多其他动态组件都有机会添加标记,每次添加后都调用fitBounds。
这是在最初创建贴图对象的初始块中...

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'而不进行检查时,Map会为每个标记缩小一次,而不管它是否需要。相反,当我使用'zoom_changed'时,我有时会在Map工具下有标记,因为缩放实际上并没有改变。现在它总是被触发,但检查确保它只在需要时缩小一次。
希望这个有用。

uajslkp6

uajslkp67#

由于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 来使Map在最终的fitBounds被permorfed时不会缩放太多,而是让用户根据自己的需要缩放。如果没有这个条件,用户可能会发生任何超过11的缩放事件。

soat7uwm

soat7uwm8#

我发现下面的代码非常好用,它是Ryan的answerhttps://stackoverflow.com/questions/3334729/...的一个变体,它保证显示的区域至少是offset的两倍。

const center = bounds.getCenter()
const offset = 0.01
const northEast = new google.maps.LatLng(
    center.lat() + offset,
    center.lng() + offset
)
const southWest = new google.maps.LatLng(
    center.lat() - offset,
    center.lng() - offset
)
const minBounds = new google.maps.LatLngBounds(southWest, northEast)
map.fitBounds(bounds.union(minBounds))
rm5edbpk

rm5edbpk9#

我只是有同样的任务要解决,并使用一个简单的函数来解决它。
它不关心边界中有多少标记-如果有很多标记并且缩放已经很远,则会缩小一点,但如果只有一个标记(或很多标记彼此非常接近),则会显著缩小(可使用extendBy变量自定义):

var extendBounds = function() {
  // Extends the Bounds so that the Zoom Level on fitBounds() is a bit farer away
  var extendBy = 0.005;
  var point1 = new google.maps.LatLng(
    bounds.getNorthEast().lat() + extendBy,
    bounds.getNorthEast().lng() + extendBy
  )
  var point2 = new google.maps.LatLng(
    bounds.getSouthWest().lat() - extendBy,
    bounds.getSouthWest().lng() - extendBy
  )
  bounds.extend(point1);
  bounds.extend(point2);
}

要使用它,我使用自己的函数来执行fitBounds()

  • Map是我的GoogleMap对象 *
var refreshBounds = function() {
  extendBounds();
  map.fitBounds(bounds);
}

相关问题