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 Maps 对象使用旧尺寸调整大小，修复：替换：

 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 Maps v3 对象知道调整大小的 div 的正确尺寸。为了让一切渲染更流畅、更快，你可以检测浏览器，如果浏览器是 Firefox，则通过 setTimeout 调用函数，如果不是 Firefox，则调用函数。

于 2012-05-30T18:12:14.637 回答