Google マップ v3:最小値を施行します。FitBounds 使用時のズームレベル

https://stackoverflow.com/questions/2989858

24-10-2019
|

質問

地図上に一連のマーカーを描画しています（地図 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 で行った操作は何もマップに影響を与えていないようです。何かが足りないのでしょうか？これを行う方法はありますか?

解決

で Googleグループに関するこの議論基本的にフィットバウンドを行うと、ズームが非同期に発生するため、ズームとバウンドの変更イベントをキャプチャする必要があることを発見しました。最終的な投稿のコードは、小さな変更で私のために機能しました...それはあなたが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);

それが役立つことを願って、

アンソニー。

他のヒント

試してみることなく、持っているだけでできるはずです 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().

アンソニーの解決策はとてもいいです。私は、イタリタルページの負荷のためにズームを修正する必要がありました（最初にズームインしていないことを確認してください）、これは私のためにトリックをしました。

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

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

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

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

var mapOptions = {
  maxZoom: 15
};

私の場合、ズームレベルを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」を使用する場合、マップは必要かどうかに関係なく、すべてのマーカーに対して一度ズームアウトしました。逆に、「Zoom_Changed」を使用すると、ズームが実際に変更されなかったため、マップツールの下にマーカーがある場合があります。今では常にトリガーされていますが、チェックにより、必要な場合にのみズームアウトすることが保証されます。

お役に立てれば。

Google Maps V3 はイベント駆動型であるため、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 を超えるズームイベントが可能になります。

私は次のことが非常にうまく機能することがわかりました。ライアンのバリアントです答えに 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))

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow

Google マップ v3:最小値を施行します。FitBounds 使用時のズーム レベル

Google マップ v3:最小値を施行します。FitBounds 使用時のズームレベル