如何影响“宽限边缘” map.fitBounds（） [英] How to affect the "grace margin" of map.fitBounds()

问题描述

在Google maps API v2中，我们国家的地图很适合700x400px的地图：

  map.getBoundsZoomLevel （<我们国家的边界​​>）
  

但是在API v3中， map.fitBounds（）方法在缩放级别不适合700x400 - 它缩小了一个级别。

这意味着 map.fitBounds（）会计入一些宽限或其他内容。

如何影响此保证金的大小？

解决方案

这里有一个解决方案，尽可能地放大地图而没有自定义的边距。如果您愿意，您应该可以对其进行调整以适应某些保证金。

我的解决方案基于在Google网上论坛主题中发表此评论。不幸的是，对 helper.getProjection（）的调用总是返回未定义的，所以我调整了上面的答案并提出了这个工作代码。

只需用 myFitBounds（map，bounds）将现有调用替换为 map.fitBounds（bounds）


$ p $ 函数myFitBounds（myMap，bounds）{
myMap.fitBounds（bounds） ;

var overlayHelper = new google.maps.OverlayView（）;
overlayHelper.draw = function（）{
if（！this.ready）{
var projection = this.getProjection（），
zoom = getExtraZoom（projection，bounds，myMap .getBounds（））;
if（zoom> 0）{
myMap.setZoom（myMap.getZoom（）+ zoom）;
}
this.ready = true;
google.maps.event.trigger（this，'ready'）;
}
};
overlayHelper.setMap（myMap）;
}

// LatLngBounds b1，b2 - >缩放增量
函数getExtraZoom（projection，expectedBounds，actualBounds）{
var expectedSize = getSizeInPixels（projection，expectedBounds），
actualSize = getSizeInPixels（projection，actualBounds）;

if（Math.floor（expectedSize.x）== 0 || Math.floor（expectedSize.y）== 0）{
return 0;
}

var qx = actualSize.x / expectedSize.x;
var qy = actualSize.y / expectedSize.y;
var min = Math.min（qx，qy）;

if（min <1）{
return 0;
}

return Math.floor（Math.log（min）/ Math.log（2）/ * = log2（min）* /）;
}

// LatLngBounds bnds - >高度和宽度作为Point
函数getSizeInPixels（投影，边界）{
var sw = projection.fromLatLngToContainerPixel（bounds.getSouthWest（））;
var ne = projection.fromLatLngToContainerPixel（bounds.getNorthEast（））;
返回新的google.maps.Point（Math.abs（sw.y - ne.y），Math.abs（sw.x - ne.x））;
}





In Google maps API v2, map of our country was nicely fitted to 700x400px map with the following:

map.getBoundsZoomLevel(<bounds of our country>)

But in API v3, the map.fitBounds() method doesn't fit it at that zoom level to 700x400 - it zooms out one level.

This means that map.fitBounds() counts with some "grace margin" or something.

How can I affect the size of this margin?

解决方案

Here's a solution that will zoom into the map as far as possible without a custom margin. You should be able to adapt it to account for some margin if you want to.

My solution is based on this comment in a Google Groups thread. Unfortunately, the call to helper.getProjection() always returned undefined, so I adapted the above answer a bit and came up with this working code.

Just replace your existing calls to map.fitBounds(bounds) with myFitBounds(map, bounds):

function myFitBounds(myMap, bounds) {
    myMap.fitBounds(bounds);

    var overlayHelper = new google.maps.OverlayView();
    overlayHelper.draw = function () {
        if (!this.ready) {
            var projection = this.getProjection(),
                zoom = getExtraZoom(projection, bounds, myMap.getBounds());
            if (zoom > 0) {
                myMap.setZoom(myMap.getZoom() + zoom);
            }
            this.ready = true;
            google.maps.event.trigger(this, 'ready');
        }
    };
    overlayHelper.setMap(myMap);
}

// LatLngBounds b1, b2 -> zoom increment
function getExtraZoom(projection, expectedBounds, actualBounds) {
    var expectedSize = getSizeInPixels(projection, expectedBounds),
        actualSize = getSizeInPixels(projection, actualBounds);

    if (Math.floor(expectedSize.x) == 0 || Math.floor(expectedSize.y) == 0) {
        return 0;
    }

    var qx = actualSize.x / expectedSize.x;
    var qy = actualSize.y / expectedSize.y;
    var min = Math.min(qx, qy);

    if (min < 1) {
        return 0;
    }

    return Math.floor(Math.log(min) / Math.log(2) /* = log2(min) */);
}

// LatLngBounds bnds -> height and width as a Point
function getSizeInPixels(projection, bounds) {
    var sw = projection.fromLatLngToContainerPixel(bounds.getSouthWest());
    var ne = projection.fromLatLngToContainerPixel(bounds.getNorthEast());
    return new google.maps.Point(Math.abs(sw.y - ne.y), Math.abs(sw.x - ne.x));
}

这篇关于如何影响“宽限边缘” map.fitBounds（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！