2

私のコードは Google Chrome と IE では動作しますが、Firefox 12 では動作しません。Firefox 12 で動作させる方法を知っている人はいますか?

コード：

...
/* START FULLSCREEN BUTTON */
// Globals
var map_size    = 'small';
var map_position= 'inherit';
var map_top     = 0;
var map_left    = 0;
var map_width   = 0;
var map_height  = 0;
var map_zIndex  = 0;
...
// when button clicked
        if(map_size == 'small') {
            map_size = 'large';
            map_position= $('div.map').css('position');
            map_top     = $('div.map').css('top');
            map_left    = $('div.map').css('left');
            map_width   = $('div.map').css('width');
            map_height  = $('div.map').css('height');
            map_zIndex  = $('div.map').css('z-index');
            $('#fullscreen').attr('src','/assets/images/restore.png');
            $('#enlarge').html('Shrink Map');
            controlUI.title = 'Click to make map smaller';
            $('div.map').css('position',    "fixed");
            $('div.map').css('top',     "10%");
            $('div.map').css('left',        "10%");
            $('div.map').css('width',       "80%");
            $('div.map').css('height',      "80%");
            $('div.map').css('z-index', 10000);
            google.maps.event.trigger(map,'resize');
            map.panToBounds(bounds);
            map.fitBounds(bounds);
        } else {
            map_size = 'small';
            $('div.map').css('position',    map_position);
            $('div.map').css('top',     map_top);
            $('div.map').css('left',        map_left);
            $('div.map').css('width',       map_width);
            $('div.map').css('height',      map_height);
            $('div.map').css('z-index', map_zIndex);
            $('#fullscreen').attr('src','/assets/images/fullscreen.png');
            $('#enlarge').html('Enlarge Map');
            controlUI.title = 'Click to make map bigger';
            google.maps.event.trigger(map,'resize');
            map.panToBounds(bounds);
            map.fitBounds(bounds);
        }
    }
...

これが実際の例ですhttp://www.helloflight.com/flight/dlh410.cfm

更新- 実際の例では以下の setTimeout ソリューションを使用しているため、Firefox 12 で機能しますが、setTimeout ソリューションがないと Firefox 12 では機能しません。

ご覧のとおり、最新バージョンの Safari、Google Chrome、および IE で動作しますが、Firefox では、マップ div を拡大すると、マップ タイルは元の div ディメンションのサイズのままであり、拡張されません。新しい div ディメンションを埋めます。

4

1 に答える 1

-1

私が知る限り、Firefox の Javascript エンジンにはチートがあり、コードを順番に実行する必要がないと判断した関数内の行を並列に実行しようとします。正しく推測すると速度が向上しますが、 $('div.map').css('width', "80%"); および $('div.map').css('height',"80%"); Firefox ではブロックされません (他のブラウザーとは異なります), google.maps.event.trigger(map,'resize'); $('div.map').css('width',"80%"); の前に完了します。および $('div.map').css('height',"80%"); したがって、Google マップ オブジェクトは古い寸法でサイズ変更され、修正: 置換:

 google.maps.event.trigger(map,'resize');
 map.panToBounds(bounds);
 map.fitBounds(bounds);

と：

 setTimeout(resizeMap,250);

そして関数を作成します：

function resizeMap() {
    google.maps.event.trigger(map,'resize');
    map.panToBounds(bounds);
    map.fitBounds(bounds);
}

250 ミリ秒の遅延は、Google マップ v3 オブジェクトがサイズ変更された div の正しいサイズを認識するのに十分なはずです。すべてをよりスムーズかつ高速にレンダリングするには、ブラウザーを検出し、ブラウザーが Firefox の場合は setTimeout を介して関数を呼び出し、Firefox でない場合は関数を呼び出します。

于 2012-05-30T18:12:14.637 に答える