Question

我在使用模式框中的v3 API嵌入Google地图时遇到问题。

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

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

我正在使用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解决方案

在模态div中替换“隐藏”类“隐藏”

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

功能javascript

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

链接html

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

Answer 4

对于那些使用bootstrap的人，我不得不删除＆＃34; fade＆＃34;来自我的＆＃34;模态＆＃34;类

这

<div class="modal fade"

到

<div class="modal" ...

我曾尝试过以前的解决方案，调用google.maps.event.trigger（map，＆＃39; resize＆＃39;）;但想通了

.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

我有这个问题，我解决了它对draw方法的回调。我认为这是因为你绘制的地图比显示对话框更加错误。

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

$('#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

据我在Chrome上使用JS实时编辑稍微戳了一下，推迟执行resize以等待模态动画可能有效：）

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

Answer 9

成功渲染地图而不调整大小。

为什么调整大小会为您提供合适的地图？

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

如何解决？

要在最近触发的任何面板中获得正确的地图布局，必须在加载面板后绘制地图。这可以通过（setTimeout）代码实现，如下所述。代码目标是在60毫秒后触发map resize事件。

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);

灰色框出现在模式框中的嵌入式Google Map的部分中

9 个答案: