2011-11-17 35 views
6

map.fitBoundsの呼び出しがズームアウトしているような問題が発生しました。私は、URLの地図の境界を保存するためにbackbone.jsルータを使用しようとしています。私は、URLをブックマークし、後でマップがまったく同じに見えるようにしたい。google maps API 3がfitBoundsをズームアウトする

コンソールでmap.fitBounds(map.getBounds())と呼ぶことに気付いたのは、常にズームアウトします。私は地図を変えないようにしたいところです。

これは正常な動作ですか?これを強制するにはどうすればマップが同じように見えるでしょうか?

ありがとう

答えて

9

Google Map APIのこの問題は、何度か議論されました。参照:境界を含むようにビューポートを設定しますmap.fitBounds()

機能。しかし、map.getBounds()関数は余分な余白を付けてビューポート境界を返します(これは正常な動作であり、バグではありません)。拡大された境界線はもはや前のビューポートには収まりませんので、マップはズームアウトします。

問題を簡単に解決するには、マップセンターとズームレベルを代わりに使用します。機能map.getCenter(),map.setCenter(),map.getZoom()およびmap.setZoom()を参照してください。

+0

私はここに着陸するのに16時間以上かかりました。これがバグではない場合でも、これをやろうとしている人にはいくつか回避すべきです。 –

0

この問題も気付きました。私の解決策は、map.getBounds()と境界を設定するものを比較することです。同じであれば、私はmap.fitBounds()呼び出しをスキップしています。

1

少しmap.fitBounds()に送信する前にバウンディングボックスを縮小

2017でこの問題を修正。ここで

はバウンディングボックスを縮小する機能です:

// Values between 0.08 and 0.28 seem to work 
// Any lower and the map will zoom out too much 
// Any higher and it will zoom in too much 
var BOUNDS_SHRINK_PERCENTAGE = 0.08; // 8% 

/** 
* @param {google.maps.LatLngLiteral} southwest 
* @param {google.maps.LatLngLiteral} northeast 
* @return {Array[google.maps.LatLngLiteral]} 
*/ 
function slightlySmallerBounds(southwest, northeast) { 
    function adjustmentAmount(value1, value2) { 
    return Math.abs(value1 - value2) * BOUNDS_SHRINK_PERCENTAGE; 
    } 

    var latAdjustment = adjustmentAmount(northeast.lat, southwest.lat); 
    var lngAdjustment = adjustmentAmount(northeast.lng, southwest.lng); 

    return [ 
    {lat: southwest.lat + latAdjustment, lng: southwest.lng + lngAdjustment}, 
    {lat: northeast.lat - latAdjustment, lng: northeast.lng - lngAdjustment} 
    ] 
} 

はこのようにそれを使用します。

// Ensure `southwest` and `northwest` are objects in google.maps.LatLngLiteral form: 
// southwest == {lat: 32.79712, lng: -117.13931} 
// northwest == {lat: 32.85020, lng: -117.09356} 

var shrunkBounds = slightlySmallerBounds(southwest, northeast); 
var newSouthwest = shrunkBounds[0]; 
var newNortheast = shrunkBounds[1]; 

// `map` is a `google.maps.Map` 
map.fitBounds(
    new google.maps.LatLngBounds(newSouthwest, newNortheast) 
); 

私はcodrと同じことをやってアプリを持っている:で現在のマップの境界を節約しますURLを更新し、更新時にURLの境界からマップを初期化します。この解決策は素晴らしいことです。

これはなぜ機能しますか?

fitBounds()が呼び出されたときに

Googleマップは、本質的にこれを行います:

  1. センター与えられたバウンディングボックスの中心点上のマップ。
  2. ビューポートがになる最高ズームレベルにズームすると、の指定された境界の内側にビューポートボックスのが表示されます。

それが1つの以上のレベルをズームアウトして与えられた境界が正確一致ビューポート、Googleマップでは、境界を「含む」とすることを考慮していないだろう場合。

0

2018年にこの質問が表示された場合、Google Maps API v3は、指定した境界線の周りに含めるパディングの量を指定する2番目のpadding引数をサポートするようになりました。

ズームアウトを避けるには、0の埋め込みでfitBoundsと電話するだけです。この例では、map.fitBounds(map.getBounds(), 0)