web-dev-qa-db-ja.com

コンテナの幅を変更した後、Googleマップを再センタリングします

Javascript API V3で設定されたGoogleマップがあります。マーカーをクリックするとコンテンツペインが上にスライドするため、動的な幅のdivで表示されます。

すべてが正常に機能しますが、1つ：ペインが上にスライドすると、マップの幅が変更されるため、中央が右側に移動します（ペインは左側にあります）。特に、ペインを開いた後に中心が見えないような小さな解像度の場合は、本当に不便です。

「サイズ変更」トリガーを試しましたが、機能しないようです...

どうもありがとう ！

javascriptgoogle-mapscenter
33
Charleshaa

resizeを自分で呼び出すと、必要なものが得られません。

あなたがする必要があるのは、最初に（サイズ変更が発生する前に）マップの現在の中心を取得することです

_var currCenter = map.getCenter();
_

Divのサイズを変更した後、次のような操作を行う必要があります。

_google.maps.event.trigger(map, 'resize');
map.setCenter(currCenter);
_

トリックを行う必要があります

UPDATE 2018-05-22

Maps JavaScript APIバージョン3.32の新しいレンダラーリリースでは、resizeイベントはMapクラスの一部ではなくなりました。

ドキュメントの状態

マップのサイズが変更されると、マップの中心が固定されます

  • フルスクリーンコントロールが中心を保持するようになりました。

  • サイズ変更イベントを手動でトリガーする必要がなくなりました。

ソース： https://developers.google.com/maps/documentation/javascript/new-renderer

google.maps.event.trigger(map, "resize");は、バージョン3.32以降では効果がありません

84
omarello

最初に現在のセンターの変数を設定し、イベントリスナーを使用してサイズ変更を検出し、センターを設定します。

//Get current center
var getCen = map.getCenter();

//Use event listener for resize on window
google.maps.event.addDomListener(window, 'resize', function() {
   //Set Center
   map.setCenter(getCen);
});
17
Tyler Rafferty

omarelloは動作しますが、それを支持することはできません。おそらく、中心座標を定義する変数を参照するのを忘れました。 「サイズ変更」は、divの現在の幅と高さを取得するだけで、マップについては何も変更しませんが、まだです！

var center = new google.maps.LatLng(39.5, -98.3);

$(document).ready(function() { 
    $("#fullsize").click(function(e) { 
        e.preventDefault();
        $("#map_canvas").css({ 
            width: '1000px'});
        google.maps.event.trigger(map, "resize"); 
        map.setCenter(center);
        }); 
    });
7
efwjames

こんにちは、これを試してみてください;）

マップの初期化

var currentMapCenter = null; 
google.maps.event.addListener(map, 'resize', function () {
    currentMapCenter = map.getCenter();
});

google.maps.event.addListener(map, 'bounds_changed', function () {
    if (currentMapCenter) {
    // react here
        map.setCenter(currentMapCenter);
    }
    currentMapCenter = null;
});

この後、touがマップのサイズを変更するときに呼び出します。

google.maps.event.trigger(map, 'resize');
2
Jose Rocha