我制作了一个可以改变大小的谷歌地图，但它在 Firefox 中不起作用

I made a google map that can change sizes but it does not work in Firefox

本文关键字：谷歌地图 不起作用 Firefox 改变 一个      更新时间：2023-09-26

我的代码在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 尺寸。

我能说的最好的是，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.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，则只需调用函数。

相关文章：