8

ページの幅の 100% の div に読み込まれた Google マップがあります (API 経由)。オーバーレイは中央に配置され、マップはこのように配置する必要があります。問題は、マップが左に配置されていることです。

ページの幅に対応する LatLng で中心を移動できますが、これは単純な作業としては大変な作業のようです。API リファレンスを調べましたが、解決策が見つかりませんでした。

Maps API (v3) で地図を中央に配置/配置する方法はありますか?

編集：

この例でブラウザ ウィンドウのサイズを変更すると、次のようになります。

http://econym.org.uk/gmap/example_fullscreen1.htm

マップはウィンドウの左上に配置されます。

私が欲しいのは、サイズを変更するときにマップの中心がウィンドウの中心に留まることです。

したがって、ウィンドウが 200 ピクセル広くなると、マップは右に 100 ピクセル移動します。

4

4 に答える 4

8

2 つdivあると、一方が他方の内側にあるため、パーセンテージを使用しても内側の 1 つを中央に配置できます。
イベント ハンドラーをアタッチして、各イベントでマップの中心を再調整しresizeます。

HTML

<div id="outerdiv">
    <div id="map_go" />
</div>

JS

$(window).on('resize', function() {
    var currCenter = map.getCenter();
    google.maps.event.trigger(map, 'resize');
    map.setCenter(currCenter);
})

CSS

#outerdiv {width: 90%; height: 90%; position:fixed; text-align:center}
#map_go {width: 70%; height: 100%; margin:0px auto; display:inline-block}

ここで動作することを確認してください：http://jsfiddle.net/RASG/eXCFw/

firefox 15でテスト済み

于 2012-10-23T18:33:31.837 に答える
6

私はこれを試してみましたが、私にとってはうまくいきました

#map-canvas { height: 70%; width :50%; margin-left:auto; margin-right:auto;}
于 2014-05-12T20:41:20.143 に答える
1

これは役立つはずです： http://econym.org.uk/gmap/basic19.htm

パーセンテージ サイズの div とマップ (マップのレンダリング サイズを知る必要がある) に関する問題について説明します。これは、Mike Williams の Google Maps API v2 チュートリアルからのものですが、この概念は v3 にも適用されます。

于 2012-10-23T17:35:15.140 に答える
0

それを達成するために2つのDIVが必要な理由がわかりません。

1 つの DIV で十分です。

$(window).resize(function() {

    var currCenter = map.getCenter();
    google.maps.event.trigger(map, 'resize');
    map.setCenter(currCenter);
});

http://jsfiddle.net/RGUnd/2/を確認してください

于 2012-10-24T10:23:13.017 に答える