Google Maps V3:执行最小值。使用fitbounds时缩放级别
-
24-10-2019 - |
题
我正在地图上绘制一系列标记(使用地图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中复制此功能,但是SetZoom和FitBound似乎没有合作:
... 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组上的讨论 我发现,基本上,当您进行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);
希望有帮助,
安东尼。
其他提示
没有尝试,我会说您应该只能通过 fitBounds()
在获得变焦之前,即
map.fitBounds(bounds);
var zoom = map.getZoom();
map.setZoom(zoom > 6 ? 6 : zoom);
如果您确实尝试过但行不通,则可以使用 minZoom
在里面 MapOptions
(API参考) 像这样:
var map = new google.maps.Map(document.getElementById("map"), { minZoom: 6 });
这将防止地图在使用时缩放进一步缩小 fitBounds()
.
安东尼的解决方案非常好。我只需要修复缩放iNITAL页面负载(确保您的缩放距离不远,而不是从中开始),这对我来说是一个技巧:
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 Maps在FitBounds期间为我选择的缩放级别。目的是使用fitbounds,但也确保在任何地图工具下没有标记,等等。
我的地图是尽早创建的,然后页面的其他许多动态组件有机会添加标记,每次添加后调用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”未安排检查时,地图都会为每个标记放大一次,无论是否需要它。相反,当我使用“ 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;
}
}
});
我用了 最初的 当最终的fitbounds被抛弃时,地图不会放大过多,而是让用户尽可能多地缩放他/她想要的。如果没有条件,用户将有可能11个缩放事件。
我发现以下内容非常好。这是瑞安的变体 回答 至 https://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))