0

注：これについては新しい質問をしたほうがいいと思いました。

そこで最近、Google マップが正しく表示されない理由について質問しました。これで、答えは簡単でシンプルに見えます。私のコードは次のようになります。

  var map;
  function initialize() {
    var mapOptions = {
         zoom: 8,
         center: new google.maps.LatLng(-34.397, 150.644),
         mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    google.maps.event.trigger(map, "resize");
  }

   google.maps.event.addDomListener(window, 'load', initialize);

問題は、マップがまだ壊れていることです。

ここに画像の説明を入力

このマップは<div id="Map"></div>高さ 350 の に保存されます。マップを保持するこの Div は Jquery-UI タブの一部であるため、サイズなどに影響を与える jquery スキニングも関連付けられています。

そうは言っても、マップは機能するはずです。

コンソールを開いて投入するとgoogle.maps.event.trigger(map, "resize");、マップは期待どおりに機能します。

4

1 に答える 1

1

また、jQuery UI タブに Google マップ (v3) を埋め込んでいたため、この修正で問題を回避する必要がありました。

var initialized = false;

$('.tabs').find('.ui-tabs-nav li').each(function() {
    if($(this).find('a').text() === 'Location') {
        if($(this).hasClass('ui-state-active')) {
            initialize();
            initialized = true;
        } else {
            $(this).click(function() {
                if(!initialized) {
                    initialize();
                    initialized = true;
                }
            });
        }
    }
});

initialize()開始マップ コードを実行する必要があることに注意してください。初期化を細分化する方法はたくさんありますが、ポイントは、探しているタブ (この場合は「場所」) がアクティブになるまで実行しないことです。

于 2013-09-04T17:08:30.027 に答える