Javascript 谷歌地图API v3:我可以在fitBounds之后设置Zoom吗?
我有一组点要在嵌入式谷歌地图(API v3)上绘制。我希望边界能够容纳所有点,除非缩放级别太低(即,缩小太多)。我的方法是这样的:Javascript 谷歌地图API v3:我可以在fitBounds之后设置Zoom吗?,javascript,google-maps,google-maps-api-3,fitbounds,Javascript,Google Maps,Google Maps Api 3,Fitbounds,我有一组点要在嵌入式谷歌地图(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()”如果在fitBo
var bounds = new google.maps.LatLngBounds();
// extend bounds with each point
gmap.fitBounds(bounds);
gmap.setZoom( Math.max(6, gmap.getZoom()) );
这不管用。最后一行“gmap.setZoom()”如果在fitBounds之后直接调用,则不会更改贴图的缩放级别
有没有一种方法可以在不将边界应用于地图的情况下获得边界的缩放级别?解决这个问题的其他方法?我使用:
gmap.setZoom(24); //this looks a high enough zoom value
gmap.fitBounds(bounds); //now the fitBounds should make the zoom value only less
这将根据您的代码使用24和必要的缩放级别中的较小者,但是它可能会改变缩放,并且不关心您缩小了多少。请尝试此操作
// Find out what the map's zoom level is
zoom = map.getZoom();
if (zoom == 1) {
// If the zoom level is that low, means it's looking around the
world.
// Swap the sw and ne coords
viewportBounds = new
google.maps.LatLngBounds(results[0].geometry.location, initialLatLng);
map.fitBounds(viewportBounds);
}
如果这对你有帮助的话
在该函数中,您需要动态添加元数据来存储几何体类型,因为该函数接受任何几何体 “FitGeometrics”是一个扩展map对象的JSON函数 “geometrics”是一个通用javascript数组,而不是MVCArray()
geometry.metadata={type:“point”};
变量几何=[geometry];
fitGeometries:函数(几何){
//去确定latLngBounds。。。
var bounds=new google.maps.LatLngBounds();
对于(变量i=0;i
我在我的一个应用程序中解决了一个类似的问题。你对这个问题的描述让我有点困惑,但我想你的目标和我一样
在我的应用程序中,我想绘制一个或多个标记,并确保地图显示了所有标记。问题是,如果我只依赖fitBounds方法,那么当只有一个点时,缩放级别将达到最大值,这是不好的
解决方案是当有多个点时使用fitBounds,当只有一个点时使用setCenter+setZoom
if (pointCount > 1) {
map.fitBounds(mapBounds);
}
else if (pointCount == 1) {
map.setCenter(mapBounds.getCenter());
map.setZoom(14);
}
我不想提出这个建议,但如果你一定要试试的话,请先打电话
gmap.fitbunds(边界)代码>
然后创建一个新的线程/异步任务,让它睡眠20-50毫秒左右,然后调用
gmap.setZoom(Math.max(6,gmap.getZoom())代码>
从UI线程(使用处理程序或AsyncTask的onPostExecute
方法)
我不知道它是否有效,只是一个建议。除此之外,你必须自己从你的点计算缩放级别,检查它是否太低,纠正它,然后调用gmap.setZoom(correctedZoom)
计算边界后,你可以检查左上角和右下角之间的距离;然后,您可以通过测试距离来了解缩放级别(如果距离太远,则缩放级别将很低),然后您可以选择wheter using setbound method或setZoom..我使用此选项来确保缩放级别不超过设定级别,以便我知道卫星图像将可用
将侦听器添加到zoom\u changed
事件。
这还可以控制UI上的缩放控件
仅在需要时执行setZoom
,因此if
语句比Math.max
或Math.min
google.maps.event.addListener(map, 'zoom_changed', function() {
if ( map.getZoom() > 19 ) {
map.setZoom(19);
}
});
bounds = new google.maps.LatLngBounds( ... your bounds ... )
map.fitBounds(bounds);
要防止缩小过远,请执行以下操作:
google.maps.event.addListener(map, 'zoom_changed', function() {
if ( map.getZoom() < 6 ) {
map.setZoom(6);
}
});
bounds = new google.maps.LatLngBounds( ... your bounds ... )
map.fitBounds(bounds);
google.maps.event.addListener(映射'zoom_changed',函数(){
如果(map.getZoom()<6){
map.setZoom(6);
}
});
bounds=新的google.maps.LatLngBounds(…您的边界…)
映射边界(bounds);
如果我没有弄错的话,我假设您希望所有的点在地图上以尽可能高的缩放级别可见。我通过将地图的缩放级别初始化为16(不确定它是否是V3上可能的最高缩放级别)来实现这一点
然后我做了一些关于边界的事情:
var bounds = new google.maps.LatLngBounds();
// You can have a loop here of all you marker points
// Begin loop
bounds.extend(marker_point);
// End loop
map.fitBounds(bounds);
结果:
成功 我所做的就是:
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
它可以在V3API上运行。编辑:请参见下面马特·戴蒙德的评论
明白了!试试这个:
map.fitBounds(bounds);
var listener = google.maps.event.addListener(map, "idle", function() {
if (map.getZoom() > 16) map.setZoom(16);
google.maps.event.removeListener(listener);
});
根据您的需要进行修改。我多次来到此页面以获得答案,虽然所有现有答案都非常有用,但它们并没有完全解决我的问题
google.maps.event.addListenerOnce(googleMap, 'zoom_changed', function() {
var oldZoom = googleMap.getZoom();
googleMap.setZoom(oldZoom - 1); //Or whatever
});
基本上,我发现“zoom_changed”事件阻止了地图的UI在等待“idle”事件时发生的“跳过”
希望这对别人有帮助 我也遇到了同样的问题,我能够用下面的代码解决它。此侦听器(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)
}
});
也有同样的问题,需要在地图上放置许多标记。
这解决了我的问题:
宣布界限
koderoid提供的使用方案(对于每个标记集bounds.extend(objlatng)
)
映射完成后执行fitbounds:
google.maps.event.addListenerOnce(map, 'idle', function() {
map.fitBounds( bounds );
});
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)
}
});
google.maps.event.addListenerOnce(map, 'idle', function() {
map.fitBounds( bounds );
});
var bounds = new google.maps.LatLngBounds();
// extend bounds with each point
gmap.setCenter(bounds.getCenter());
gmap.setZoom( 6 );
var bounds = new google.maps.LatLngBounds();
// extend bounds with each point
var minLatSpan = 0.001;
if (bounds.toSpan().lat() > minLatSpan) {
gmap.fitBounds(bounds);
} else {
gmap.setCenter(bounds.getCenter());
gmap.setZoom(16);
}
google.maps.event.addListener(marker, 'dblclick', function () {
var oldZoom = map.getZoom();
map.setCenter(this.getPosition());
map.setZoom(parseInt(oldZoom) + 1);
});
map.setOptions({ maxZoom: 15 });
map.fitBounds(bounds);
map.setOptions({ maxZoom: null });
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.fitBounds(bounds);
// CHANGE ZOOM LEVEL AFTER FITBOUNDS
zoomChangeBoundsListener = google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
if (this.getZoom()){
this.setZoom(15);
}
});
setTimeout(function(){
google.maps.event.removeListener(zoomChangeBoundsListener)
}, 2000);
var bounds = new google.maps.LatLngBounds();
// ... (extend bounds with all points you want to fit)
// Ensure the map does not get too zoomed out when fitting the bounds.
gmap.setOptions({minZoom: 6});
// Clear the minZoom only after the map fits the bounds (note that
// fitBounds() is asynchronous). The 'idle' event fires when the map
// becomes idle after panning or zooming.
google.maps.event.addListenerOnce(gmap, 'idle', function() {
gmap.setOptions({minZoom: null});
});
gmap.fitBounds(bounds);
// 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.fitBounds(bounds);
function set_zoom() {
if(map.getZoom()) {map.setZoom(map.getZoom() - 1);}
else {setTimeout(set_zoom, 5);}
}
setTimeout(set_zoom, 5);