Question

我正在尝试动态创建嵌入式Google地图元素。它可以工作，但不是在createElement创建包含div时。

我正在动态加载Google Maps API

var s = document .createElement ('script');

s .src = "https://maps.googleapis.com/maps/api/js" +
        "?key=" + GOOGLE_MAPS_API_KEY +
        "&callback=init_google_maps";

document .head .appendChild (s);

function init_google_maps ()
{
     ...
}

如果我有这个容器

<div id="map" style="width:200px;height:200px;background:red"></div>

并且init代码执行此操作

var div = document .getElementById ('map');

var testmap = new google .maps .Map (div, ...);

然后正确加载地图。

但是，如果我这样做

var div = document .getElementById ('map');

var subdiv = document .createElement ('div');

div .appendChild (subdiv);

var testmap = new google .maps .Map (subdiv, ...);

地图无法加载。 javascript没有抛出任何异常，检查员告诉我subdiv内有生成的东西，但它根本没有显示任何内容。

为什么创建和使用subdiv会动态地破坏地图？

Answer 1

似乎解决方案是：

作为地图的div必须在CSS中指定宽度和高度，
要小心百分比大小，这在任何地方都无法正常工作，例如：表格单元格，
在地图div放置在DOM中之后调用google.maps.event.trigger(map, 'resize');，可见，并计算宽度和高度。

我的完整代码会重新显示地图div，这意味着移动后必须重新考虑以上所有内容。

Answer 2

在加载

后触发以下内容

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

Answer 3

当您的细分可见时，请致电google.maps.event.trigger(map, 'resize')。

喜欢这个

if($('#subdivid').css('display') == 'block')
{
       google.maps.event.trigger(map, 'resize');                
}

为什么谷歌地图不会在动态生成的div中显示？

3 个答案: