Javascript 灰色框出现在模式框中的嵌入式 Google 地图的部分中

Grey boxes appear in parts of embedded Google Map in modal box

提问by Johan Brook

I'm having a problem with embedding a Google Map via the v3 API in a modal box.

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

Grey boxes appear in the map canvas when the modal is shown.Resizing the browser window, bringing up Web Inspector, etc. makes all map tiles visible, i.e. it "force re-render" the map.

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

The parent element of the map element (section#map-modal, see code below) has display: noneset in its CSS on page load. The JS modal code automatically sets display: blockwhen the show button is clicked. If I temporarily remove display: nonefrom the modal element, the map renders correctly on page refresh. Isn't the Google Map liking having a hidden parent element?

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

I'm using Twitter's Bootstrap modal jQuery plugin, and am controlling the modal itself with CSS. It's fixed positioned, have a pixel width, etc. Nothing unusual.

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

I've of course googled around for solutions, and many points to the Google API method of triggering the resizeevent:

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

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

I've indeed done so, but to no avail.

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

Relevant code: https://gist.github.com/1591488

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

As you can see, I'me triggering the events at line 39.

如您所见，我在第 39 行触发了事件。

(press the View larger mapbutton at the bottom of the sidebar).

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

Files:

文件：

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

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

I would deeply appreciate any help or extra pair of eyes in this, as I'm soon going mad over it.

我非常感谢这方面的任何帮助或额外的一双眼睛，因为我很快就会为此生气。

回答by gabeodess

Try using the modal event handlers. I think this is the most concise (and correct) way to ensure that you are resizing after the modal is shown without rewriting any plugins:

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

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

UPDATE: I just realized that this solution still does not center the map properly, so I needed to add one more command:

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

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

回答by Johan Brook

I discovered that having display: noneon the map's parent element (the modal) really messed things up. I changed it to visibility: hiddenjust in sheer desperation to see what would happen, and it worked!

我发现display: none在地图的父元素（模态）上真的把事情搞砸了。我把它改成visibility: hidden纯粹是为了看看会发生什么，它奏效了！

I also modified the modal JS code to set the modal to visibility: visible/hiddenwhen the modal is shown/hid. Otherwise it would get display: none/blockset again, which would create the grey boxes again.

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

回答by falperez

My solution for bootstrap-modal.js v 2.0

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

replace class "hide" for "invisible" in Modal div

将 Modal div 中的“隐藏”类替换为“不可见”

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

function javascript

函数 javascript

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

link html

链接 html

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

回答by mogile_oli

For those using bootstrap, I had to remove "fade" from my "modal" class

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

From

从

<div class="modal fade" 

to

到

<div class="modal" ...

I had tried the previous solutions with calling google.maps.event.trigger(map, 'resize'); but figured that

我已经尝试过调用 google.maps.event.trigger(map, 'resize'); 之前的解决方案。但认为

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

was never getting called. This issue seemed to point me to removing the fade.
https://github.com/twbs/bootstrap/issues/11793

从未被调用。这个问题似乎指向我删除淡入淡出。
https://github.com/twbs/bootstrap/issues/11793

This is not an optimal solution since the fade is actually very nice to have...

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

回答by you786

The problem is that if you do something like this:

问题是，如果你做这样的事情：

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

is that your modal probably wasn't open (and displayed at the right size) when the resize event is triggered. To solve this:

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

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

Worked for me at least :)

至少为我工作:)

回答by khaz

I had this problem and I solved it doing a callback to the draw method. I think this happens because you draw your map erlier than showing the dialog.

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

I used this code to solve it (it wasn′t a modal window):

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

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

回答by Mir Shakeel Hussain

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

     });
});

回答by Gyaneshwar Rao N

map rendered successfully without resize.

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

Why resize gives you proper map ?

为什么调整大小会给你合适的地图？

Because browser paints the view again.

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

How to fix it?

如何解决？

To get a proper layout of the map in any panel which is triggered lately, map has to be painted after the panel is loaded.This can be achieved by (setTimeout) code as mentioned below. code objective is to trigger map resize event after 60 milli seconds.

要在最近触发的任何面板中获得正确的地图布局，必须在加载面板后绘制地图。这可以通过 (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);

回答by Hiroaki Yamane

As far as I poked at it a bit on Chrome using JS live edit, delaying the execution of resizeto wait for the modal animation might work :)

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

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

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