web-dev-qa-db-ja.com

Googleマップv3：強制適用fitBoundsを使用するときのズームレベル

マップ上に一連のマーカーを描画しています（マップAPIのv3を使用）。

V2では、次のコードがありました。

  bounds = new GLatLngBounds();

  ... loop thru and put markers on map ...
  bounds.extend(point);
  ... end looping

  map.setCenter(bounds.getCenter());
  var level = map.getBoundsZoomLevel(bounds);
  if ( level == 1 ) 
    level = 5;
  map.setZoom(level > 6 ? 6 : level);

また、マップ上に常に適切なレベルの詳細が表示されるようにするためにうまく機能します。

私はv3でこの機能を複製しようとしていますが、setZoomとfitBoundsは協力していないようです：

... loop thru and put markers on the map
  var ll = new google.maps.LatLng(p.lat,p.lng);
  bounds.extend(ll);
... end loop

var zoom = map.getZoom();
map.setZoom(zoom > 6 ? 6 : zoom);
map.fitBounds(bounds);

別の並べ替えを試してみました（たとえば、setZoomの前にfitBoundsを移動します）が、setZoomで何もしないと、マップに影響を与えるようです。何か不足していますか？これを行う方法はありますか？

javascriptgoogle-mapsgoogle-maps-api-3fitbounds
69
chris

Googleグループに関するこのディスカッション では、基本的にfitBoundsを行うと、ズームが非同期的に発生するため、ズームと境界変更イベントをキャプチャする必要があることを発見しました。最後の投稿のコードは少し変更を加えて機能しました... 15を超えるズームを完全に停止するので、4番目の投稿のアイデアを使用して、最初にのみフラグを設定しました。

// Do other stuff to set up map
var map = new google.maps.Map(mapElement, myOptions);
// This is needed to set the zoom after fitbounds, 
google.maps.event.addListener(map, 'zoom_changed', function() {
    zoomChangeBoundsListener = 
        google.maps.event.addListener(map, 'bounds_changed', function(event) {
            if (this.getZoom() > 15 && this.initialZoom == true) {
                // Change max/min zoom here
                this.setZoom(15);
                this.initialZoom = false;
            }
        google.maps.event.removeListener(zoomChangeBoundsListener);
    });
});
map.initialZoom = true;
map.fitBounds(bounds);

お役に立てば幸いです

アンソニー。

126
Malks

それを試さずに、ズームレベルを取得する前にfitBounds()を持っているだけでできるはずです。

_map.fitBounds(bounds);
var zoom = map.getZoom();
map.setZoom(zoom > 6 ? 6 : zoom);
_

それを試してもうまくいかなかった場合は、minZoomのMapOptionsを使用してマップをセットアップできます。 （api-reference） このような：

_var map = new google.maps.Map(document.getElementById("map"), { minZoom: 6 });
_

これにより、fitBounds()を使用するときにマップがズームアウトされなくなります。

56
Flygenring

アンソニーのソリューションは非常に素晴らしいです。最初のページの読み込み時にズームを修正するだけで（最初からズームインしすぎないようにします）、これでうまくいきました。

var zoomChangeBoundsListener =
    google.maps.event.addListener(map, 'bounds_changed', function(event) {
        google.maps.event.removeListener(zoomChangeBoundsListener);
        map.setZoom( Math.min( 15, map.getZoom() ) );
    });


map.fitBounds( zoomBounds );
16
Angry Dan

FitBounds（）を呼び出す直前にmaxZoomオプションを設定し、後で値をリセットすることもできます。

if(!bounds.isEmpty()) {
    var originalMaxZoom = map.maxZoom;
    map.setOptions({maxZoom: 18});
    map.fitBounds(bounds);
    map.setOptions({maxZoom: originalMaxZoom});
}
14
Joost

1つのアイテムでmap.fitBounds（）を呼び出すと、マップがズームインしすぎる可能性があります。これを修正するには、単に「maxZoom」をmapOptionsに追加します...

var mapOptions = {
  maxZoom: 15
};
11
Mark Swardstrom

私の場合、単にズームレベルを、fitBoundsでGoogleマップが選択した値よりも1つ小さい値に設定したかっただけです。目的はfitBoundsを使用することでしたが、マップツールなどの下にマーカーがないことも確認しました。

私のマップは早期に作成され、その後、ページの他の多くの動的コンポーネントはマーカーを追加する機会があり、追加するたびにfitBoundsを呼び出します。

これは、マップオブジェクトが最初に作成される最初のブロックにあります...

var mapZoom = null;

次に、これは、map.fitBoundsが呼び出される直前に、マーカーが追加される各ブロックに追加されます...

google.maps.event.addListenerOnce(map, 'bounds_changed', function() { 
    if (mapZoom != map.getZoom()) { 
        mapZoom = (map.getZoom() - 1); 
        map.setZoom(mapZoom); 
    } 
});

チェックインを行わずに「bounds_changed」を使用すると、マップは必要かどうかに関係なく、マーカーごとに1回ズームアウトしました。逆に、「zoom_changed」を使用すると、ズームが実際に変更されなかったため、マップツールの下にマーカーが表示されることがありました。現在は常にトリガーされますが、このチェックにより、必要なときにのみ一度だけズームアウトすることが保証されます。

お役に立てれば。

7
oucil

Google Maps V3はイベント駆動型であるため、zoom_changedイベントがトリガーされたときにズームを適切な量に戻すようにAPIに指示できます。

var initial = true
google.maps.event.addListener(map, "zoom_changed", function() {
    if (initial == true){
       if (map.getZoom() > 11) {
         map.setZoom(11);
         initial = false;
       }
    }
});

initialを使用して、最終的なfitBoundsが変更されたときにマップがズームしすぎないようにしますが、ユーザーが好きなだけズームできるようにしました。条件がなければ、ユーザーは11を超えるズームイベントを実行できます。

3
tuned

以下が非常にうまく機能することがわかりました。これは、Ryanの answer から https：//stackoverflow.com/questions/3334729/... への変形です。度でoffsetの値の少なくとも2倍の面積を表示することが保証されます。

const center = bounds.getCenter()
const offset = 0.01
const northEast = new google.maps.LatLng(
    center.lat() + offset,
    center.lng() + offset
)
const southWest = new google.maps.LatLng(
    center.lat() - offset,
    center.lng() - offset
)
const minBounds = new google.maps.LatLngBounds(southWest, northEast)
map.fitBounds(bounds.union(minBounds))
1
Jan K.