Google Maps API fitbounds 向左或向右移动地图

Question

我有一个应用程序，我保存中心纬度、经度以及中心与地图东北角之间的距离，这样我们就可以用我们保存的相同边界绘制地图。 当我使用存储的数据绘制地图时，我遇到的第一个问题是使用 fitbounds() 会在我通过的边界上添加一个边距，这增加了一个额外的缩放级别，因此地图看起来与原始版本非常不同地图。为了解决这个问题，我使用解决方案#6 重新计算边界：https://code.google.com/p/gmaps-api-issues/issues/detail?id=3117

由于 fitbounds 方法添加的边距，我使用 map.fitbounds(new bounds) 重新计算边界的结果。

但现在我注意到，当我使用存储在数据库中的值绘制地图时，地图会随机向右或向左移动，这在低缩放级别上更加臭名昭著。我希望您能说明为什么会发生这种情况，或者我该如何解决。谢谢。

Answer 1

您可以编写自定义函数来解决边距问题。请看myFitBounds()函数的实现。

代码 sn-p：

var map; 
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));
}  

function initialize() { 
    var mapOptions = { 
        zoom: 8, 
        center: new google.maps.LatLng(-34.397, 150.644), 
        panControl: false, 
        zoomControl: false, 
        mapTypeControl: false, 
        scaleControl: false, 
        streetViewControl: false, 
        overviewMapControl: false 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions); 

    bounds = new google.maps.LatLngBounds(); 
    var extendPoint1 = new google.maps.LatLng(35.491823,6.626860999999963); 
    var extendPoint2 = new google.maps.LatLng(47.09192,18.520579999999995); 
    new google.maps.Marker({position: extendPoint1,map: map}); 
    new google.maps.Marker({position: extendPoint2,map: map}); 
    bounds.extend(extendPoint1); 
    bounds.extend(extendPoint2); 
    myFitBounds(map,bounds);  
    //map.fitBounds(bounds);
} 

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<div id="map-canvas"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places&callback=initialize"></script>