javascript - Google Maps v3：強制最小。fitBounds使用時のズームレベル

Question

マップ上に一連のマーカーを描画しています（マップ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で何もしていないようです。私は何かが足りないのですか？これを行う方法はありますか？

score 145 · Accepted Answer

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);

お役に立てば幸いです。

アンソニー。

score 67 · Accepted Answer

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()。

score 20 · Accepted Answer

アンソニーの解決策はとてもいいです。最初のページ読み込みのズームを修正するだけで済み（最初からズームインしすぎていないことを確認）、これでうまくいきました。

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 );

score 19 · Accepted Answer

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

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

score 11 · Accepted Answer

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

var mapOptions = {
  maxZoom: 15
};

score 8 · Accepted Answer

私の場合、ズームレベルをGoogleマップがfitBounds中に選択したものより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」を使用した場合、ズームが実際には変更されなかったため、マップツールの下にマーカーが表示されることがありました。これで常にトリガーされますが、チェックにより、必要な場合にのみズームアウトすることが保証されます。

お役に立てれば。

score 3 · Accepted Answer

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

私は初期値を使用して、最終的なfitBoundsが実行されたときにマップがズームしすぎないようにしましたが、ユーザーが好きなだけズームできるようにしました。この条件がないと、ユーザーは11を超えるズームイベントが発生する可能性があります。

score 2 · Accepted Answer

私は以下が非常にうまく機能することを発見しました。これは、 https：//stackoverflow.com/questions/3334729/...に対するライアンの回答の変形です。度単位の値の少なくとも2倍の領域を表示することが保証されます。offset

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))

score 0 · Accepted Answer

私はちょうど同じタスクを解決する必要があり、それを解決するために単純な関数を使用しました。

境界内にマーカーがいくつあるかは関係ありません-たくさんあり、ズームがすでに遠くにある場合、これは少しズームアウトしますが、マーカーが1つしかない場合（または互いに非常に近い場合）、次にズームアウトは重要です（extendBy変数でカスタマイズ可能）：

var extendBounds = function() {
  // Extends the Bounds so that the Zoom Level on fitBounds() is a bit farer away
  var extendBy = 0.005;
  var point1 = new google.maps.LatLng(
    bounds.getNorthEast().lat() + extendBy,
    bounds.getNorthEast().lng() + extendBy
  )
  var point2 = new google.maps.LatLng(
    bounds.getSouthWest().lat() - extendBy,
    bounds.getSouthWest().lng() - extendBy
  )
  bounds.extend(point1);
  bounds.extend(point2);
}

それを使用するために、私は独自の関数を使用してfitBounds()：
mapは私のGoogleMapオブジェクトです

var refreshBounds = function() {
  extendBounds();
  map.fitBounds(bounds);
}

javascript - Google Maps v3：強制最小。fitBounds使用時のズームレベル

9 に答える 9

Related

Reference