5

いろいろと調べてみましたが、このような問題は見つかりませんでした。

Gmaps4rails は私にとって素晴らしい作品です!

問題は、JQuery タブに挿入したときです。マップの半分を読み込みます。実際には写真が欠けているようです。通常どおり移動/サイズ変更できます。ただし、マップの一部のみを表示します。そして、欠落している部分は通常、左/下の部分です。しかし、空の部分のサイズは常に変化します。

同時に、この空の部分をホバリングすると、マップにホバリングしたときにマウス カーソルを示す手が矢印に変わります (ただし、この部分はまだ Google コンテナ内にあります)。

gmaps コンテナーを JQuery タブの外に配置すると、完全に機能します。誰もこれを見たことがありますか？

見る

   #tabs-4
     #gmap
       =gmaps("map_options" => { "detect_location" => true, "auto_zoom" => false, "center_on_user" => true, "zoom" => 17},"markers" => { "data" => @json })

どうもありがとう！

4

4 に答える 4

8

このリンクを参照してくださいhttp://jqueryui.com/demos/tabs/#...my_slider.2C_Google_Map.2C_sIFR_etc._not_work_when_placed_in_a_hidden_​​.28inactive.29_tab.3F

ただし、V3 ではサイズ変更の呼び方が異なります

電話してみるgoogle.maps.event.trigger(map, 'resize')

編集

私が見つけたすべてのメソッドは、JavaScript の変更を参照しています。私が見つけた別の方法http://snipplr.com/view/57003/

$('#tabs').tabs({
    show: function (event, ui) {
        google.maps.event.trigger(map, 'resize');
    }
});
于 2012-04-19T13:43:50.977 に答える
4

この質問は1年前のものですが、私が経験していたことを正確に説明していますが、受け入れられた回答はうまくいきませんでした. これが最終的に機能したものです...

$('#tabs').tabs({
  activate: function (event, ui) {
    var center = Gmaps.map.map.getCenter();
    google.maps.event.trigger(map, 'resize');
    Gmaps.map.map.setCenter(center);
  }
});

多分私は新しいバージョンを使用しています。show: の代わりに activate: を使用する必要があり、コンテナを埋めるためにマップが拡張されると、マップが中心からずれていたため、センタリング コードが必要でした。これが誰かの時間を節約することを願っています!

于 2013-03-25T23:27:28.427 に答える
1

これは一般的な問題です。マップサイズがAPIに認識されていることを確認する必要があります（現在、サイズはゼロであると見なされます）。

マップが表示されたときにサイズ変更イベントをトリガーします。ドキュメントから：

開発者は、divのサイズが変更されたときに、マップ上でこのイベントをトリガーする必要があります。google.maps.event.trigger(map, 'resize')

于 2012-04-19T13:42:05.837 に答える
0

上に投稿されたものを少し変更するだけです。選択した回答を使用すると、マップが正しくフォーカスされないというバグが発生する可能性があります。@ SteveO7が言ったことはうまくいきます。また、ブートストラップ用に少し調整する必要がありました。ここにCoffeeScriptがあります：

$('a[data-toggle="tab"]').on 'shown', (e) ->
  if $(e.target).attr('href') == '#tab2'
    center = Gmaps.map.map.getCenter()
    google.maps.event.trigger map, "resize"
    Gmaps.map.map.setCenter(center)
于 2013-04-05T07:36:51.847 に答える