谷歌地图v3 fitBounds()缩放太近,不适合单个标记

Question

有没有办法设置最大缩放级别fitBounds()？我的问题是,当地图仅被馈送到一个位置时,它会尽可能地放大,这实际上使地图脱离了上下文并使其无用.也许我采取了错误的做法？

提前致谢!

Answer 1

我喜欢mrt的解决方案(特别是当你不知道要映射或调整多少点时),除了它抛出标记以使它不再位于地图的中心.我只是通过从lat和lng减去.01的额外点来扩展它,因此它将标记保持在中心.工作得很好,谢谢你!

// Pan & Zoom map to show all markers
function fitToMarkers(markers) {

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

    // Create bounds from markers
    for( var index in markers ) {
        var latlng = markers[index].getPosition();
        bounds.extend(latlng);
    }

    // Don't zoom in too far on only one marker
    if (bounds.getNorthEast().equals(bounds.getSouthWest())) {
       var extendPoint1 = new google.maps.LatLng(bounds.getNorthEast().lat() + 0.01, bounds.getNorthEast().lng() + 0.01);
       var extendPoint2 = new google.maps.LatLng(bounds.getNorthEast().lat() - 0.01, bounds.getNorthEast().lng() - 0.01);
       bounds.extend(extendPoint1);
       bounds.extend(extendPoint2);
    }

    map.fitBounds(bounds);

    // Adjusting zoom here doesn't work :/

}

Answer 2

您可以设置您的地图maxZoom中MapOptions ^(API参考)如下:

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

这样可以防止地图在使用时更深地缩放fitBounds(),甚至可以从缩放控件中删除缩放级别.

Answer 3

另一种解决方案是在执行fitBounds()之前检测到它们太小而扩展边界:

var bounds = new google.maps.LatLngBounds();
// here you extend your bound as you like
// ...
if (bounds.getNorthEast().equals(bounds.getSouthWest())) {
   var extendPoint = new google.maps.LatLng(bounds.getNorthEast().lat() + 0.01, bounds.getNorthEast().lng() + 0.01);
   bounds.extend(extendPoint);
}
map.fitBounds(bounds);

Answer 4

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

使用MaxZoom选项最适合不缩放以关闭您拥有的标记.

Answer 5

一旦你添加了所有真实边界,就添加这些线条

var offset = 0.002;     
var center = bounds.getCenter();                            
bounds.extend(new google.maps.LatLng(center.lat() + offset, center.lng() + offset));
bounds.extend(new google.maps.LatLng(center.lat() - offset, center.lng() - offset));

它得到了真实边界的中心,然后在你的中心向东北方向和西南方向增加了两个额外的点

这有效地设置了最小变焦,更改偏移值以增大或减小变焦

Answer 6

如果是单个位置,则可以使用setCenter()和setZoom().

Answer 7

你可以用

map.setOptions({
    maxZoom: [what u want],
    minZoom: [what u want]
});

这样你就可以在地图初始化之后设置地图的属性....你可以根据需要设置它们多次...但是在你的情况下...你可以在fitBounds()之前设置它们

祝你好运,拉鲁图

Answer 8

我阻止地图放大到远的方法是添加以下代码行:

var zoomOverride = map.getZoom();
        if(zoomOverride > 15) {
        zoomOverride = 15;
        }
      map.setZoom(zoomOverride);

直接在这一行之后:

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

您可以随意将缩放级别更改为您不希望地图缩放的任何级别.

如果您有任何问题或疑问,请在http://icode4you.net/creating-your-own-store-locator-map-how-to-prevent-the-上写下我写的关于此的博客文章.地图从-移近太紧密上一个单标记

Answer 9

我真的很喜欢mrt的解决方案,如果你总是只有一点可以使用它,那就完美了.然而我确实发现,如果边界框不是基于一个点,但是点非常接近,这仍然可能导致地图放大得太远.

这是首先检查点是否在彼此的定义距离内的方法,然后如果它们小于该最小距离,则将边界扩展到该最小距离:

var bounds = new google.maps.LatLngBounds();
// here you extend your bound as you like

// ...

var minDistance = 0.002;
var sumA = bounds.getNorthEast().lng() - bounds.getSouthWest().lng();
var sumB = bounds.getNorthEast().lat() - bounds.getSouthWest().lat();

if((sumA < minDistance && sumA > -minDistance) 
&& (sumB < minDistance && sumB > -minDistance)){
var extendPoint1 = new google.maps.LatLng(bounds.getNorthEast().lat() + minDistance, bounds.getNorthEast().lng() + minDistance);
    var extendPoint2 = new google.maps.LatLng(bounds.getNorthEast().lat() - minDistance, bounds.getNorthEast().lng() - minDistance);
    bounds.extend(extendPoint1);
    bounds.extend(extendPoint2);
}

希望这有助于某人!

Answer 10

对于我来说，我通过在 fitBounds 之后创建一个空闲事件来解决这个问题。工作完美。我猜这是这里最干净的解决方案之一

var locations = [['loc', lat, lng], ['loc', lat, lng]];
.....
for (i = 0; i < locations.length; i++) { 
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10
  });
  .... create markers, etc.
}
....
map.fitBounds(bounds);  
google.maps.event.addListenerOnce(map, 'idle', function() {
  if (locations.length == 1) {
    map.setZoom(11);
  }
});