javascript - 将 Google map 视口(viewport)设置为自动适合不同位置的 (n) 个标记位置的 Pane

Question

到目前为止我采用的方法是:

function addMarker( query ) {
    var geocoder = new google.maps.Geocoder();
    var afterGeocode = $.Deferred();

    // Geocode 'query' which is the address of a location.
    geocoder.geocode( 
            { address: query }, 
            function( results, status ){

                    if( status === 'OK' ){
                        afterGeocode.resolve( results ); // Activate deferred.
                    }
            }
    );

    afterGeocode.then( function( results ){
        var mOptions = {
            position: results[0].geometry.location,
            map: map
        }

        // Create and drop in marker.
        var marker = new google.maps.Marker( mOptions );
        marker.setAnimation( google.maps.Animation.DROP );      

        var current_bounds = map.getBounds(); // Get current bounds of map
        // use the extend() function of the latlngbounds object
        // to incorporate the location of the marker
        var new_bounds = current_bounds.extend( results[0].geometry.location );
        map.fitBounds( new_bounds ); // fit the map to those bounds
    }); 
}

我遇到的问题是 map 莫名其妙地缩小了一些，无论新标记是否适合当前视口(viewport)。

我做错了什么？

附录

我添加了日志和一个额外的变量来捕获 map 边界之后进行了转换(new_new_bounds)

current_bounds = // Map bounds before anything is done.
    {-112.39575760000002, 33.60691883366427},
    {-112.39295444655761, 33.639099}

new_bounds = // From after the extend
    {-112.39295444655761, 33.60691883366427}, 
    {-112.39575760000002, 33.639099}

new_new_bounds = // From after the fitbounds
    {-112.33942438265382, 33.588697452015374},
    {-112.44928766390382, 33.657309727063996}

Answer 1

好吧，经过多次争论，问题出在 map 的边界与 fitBounds() 之后的 map 边界不同。会发生什么(我推测)是 Google 接受您在 fitBounds() 方法中给它的边界，然后填充它们。每次将当前边界发送到 fitBounds() 时，您不会拟合边界 (x,y)，而是拟合边界 (x+m,y+m)，其中m = 任意边距。

也就是说，最好的方法是:

var current_bounds = map.getBounds();
var marker_pos = marker.getPosition();

if( !current_bounds.contains( marker_pos ) ){

    var new_bounds = current_bounds.extend( marker_pos );
    map.fitBounds( new_bounds );
}

因此，只有当放置的标记落在当前 map 边界之外时， map 才会适合边界。希望这对遇到此问题的其他人有所帮助。