模态框中嵌入的 Google 地图部分出现灰色框

Question

我在通过 v3 API 在模式框中嵌入 Google 地图时遇到问题。

当显示模式时，地图画布中会出现灰色框。调整浏览器窗口大小、调出 Web 检查器等会使所有地图图块可见，即“强制重新渲染”地图。

地图元素的父元素（section#map-modal，请参阅下面的代码）在页面加载时在其 CSS 中设置了 display: none。当点击show按钮时，JS模态代码会自动设置display: block。如果我暂时从模式元素中删除 display: none，则地图会在页面刷新时正确呈现。谷歌地图不喜欢有一个隐藏的父元素吗？

我正在使用 Twitter 的 Bootstrap 模态 jQuery 插件，并使用 CSS 控制模态本身。它的位置是固定的，有像素宽度等。没有什么不寻常的。

我当然已经在谷歌上搜索过解决方案，并且很多都指向触发 resize 事件的 Google API 方法：

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

我确实这样做了，但没有效果。

相关代码：https://gist.github.com/1591488

可以看到，我正在第 39 行触发事件。

（按侧边栏底部的查看更大的地图按钮）。

文件：

• fagerhult.js
• fagerhult.map.js
• bootstrap-modal.js
• master.css

我将非常感激任何帮助或额外的眼睛在这，因为我很快就会对此发疯。

Answer 1

尝试使用模式事件处理程序。我认为这是确保在显示模式后调整大小而不重写任何插件的最简洁（也是正确）的方法：

$('#map-modal').on('shown', function () {
  google.maps.event.trigger(map, 'resize');
})

更新：我刚刚意识到这个解决方案仍然没有正确居中地图，所以我需要添加一个更多命令：

$('#map-modal').on('shown', function () {
  google.maps.event.trigger(map, 'resize');
  map.setCenter(new google.maps.LatLng(42.3605336, -72.6362989));
})

Answer 2

我发现在地图的父元素（模态）上使用 display: none 确实把事情搞砸了。我将其更改为 visibility:hidden 只是出于纯粹的绝望，想看看会发生什么，结果成功了！

我还修改了模态 JS 代码，以在模态显示/隐藏时将模态设置为 visibility:visible/hidden。否则，它将再次设置 display: none/block，这将再次创建灰色框。

Answer 3

我的 bootstrap-modal.js v 2.0 解决方案

将 Modal div

<div id="map_modal" class="modal fade invisible">
...
</div>

函数 javascript

function open_map()
{   
   $('#map_modal').removeClass("invisible");
   $('#map_modal').modal('toggle');   
}

link html中的类“hide”替换为“invisible”

<a href="javascript:open_map()">Open map</a>

Answer 4

对于那些使用引导程序的人，我必须从我的“模态”类中删除“淡入淡出”

从

<div class="modal fade" 

到

<div class="modal" ...

我尝试了以前的解决方案，调用 google.maps.event.trigger(map, 'resize');但我想那

.on("shown.bs.modal" ...

永远不会被叫到。这个问题似乎提示我消除淡入淡出。
https://github.com/twbs/bootstrap/issues/11793

这不是最佳解决方案，因为淡入淡出实际上非常好......

Answer 5

问题是，如果您执行以下操作：

$("#mapModalLink").click(function(){
  google.maps.event.trigger(map,"resize");
});

触发调整大小事件时，您的模式可能未打开（并以正确的大小显示）。为了解决这个问题：

$("#mapModalLink").click(function(){
  $("#mapModal").show();
  google.maps.event.trigger(map, 'resize');
});

至少对我有用:)

Answer 6

我遇到了这个问题，我通过回调绘制方法解决了这个问题。我认为发生这种情况是因为您绘制地图比显示对话框更早。

我用这段代码来解决它（它不是模态窗口）：

$('#map').show(function()
{
    var punto = new google.maps.LatLng(this.latitud, this.longitud);
    var myOptions = {zoom: 15, center: punto, mapTypeId: google.maps.MapTypeId.ROADMAP,mapTypeControl:false, draggable:false};
    var map = new google.maps.Map(document.getElementById('mapa'),  myOptions);
    var marker = new google.maps.Marker({
    position:punto,
    map: map,
    title: this.nombre
});
});

Answer 7

google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
     google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
          google.maps.event.trigger(map, 'resize');

     });
});

Answer 8

据我使用 JS 实时编辑在 Chrome 上进行了一些研究，延迟执行 resize 以等待模态动画可能会起作用:)

https://gist.github.com/1592330#L107

Answer 9

地图渲染成功，无需调整大小。

为什么调整大小会给你正确的地图？

因为浏览器会再次绘制视图。

如何修复它？

为了在最近触发的任何面板中获得正确的地图布局，必须在加载面板后绘制地图。这可以通过下面提到的 (setTimeout) 代码来实现。
代码目标是在 60 毫秒后触发地图调整大小事件。

setTimeout(function () {
        uiGmapIsReady.promise().then(function (maps) {
            google.maps.event.trigger(maps[0].map, 'resize');
            lat = -37;
            lon = 144;
            maps[0].map.panTo(new google.maps.LatLng(lat,lon));
            var marker = {
                id: Date.now(),
                coords: {
                    latitude: lat,
                    longitude: lon
                }
            };
            $scope.map.markers = [];
            $scope.map.markers.push(marker);
            console.log($scope.map.markers);
        });
    }, 60);