本文介绍了如何影响“宽限边缘” map.fitBounds()的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

  map.getBoundsZoomLevel (<我们国家的边界​​>)

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

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



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

解决方案

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



我的解决方案基于。不幸的是,对 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 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()的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-15 08:24