如果我在 IE 下按 F12 键，地图仅在我的网页上可见答案

【问题标题】：Map only visible on my web page if I press F12 key under IE如果我在 IE 下按 F12 键，地图仅在我的网页上可见
【发布时间】：2016-04-28 06:35:57
【问题描述】：

这个帖子是我方面的更多调查，试图了解为什么我的地图在我的页面上不可见。原文见下方链接

为什么我注意到当我运行包含 MAP 的页面时，方块是灰色的，但地图已加载，因为我可以放置图钉。然后，如果我只按一次 F12 键进入调试模式，然后 MAP 突然出现并且仍然存在

如果我在刷新包含地图的页面时检查调试器，我只会收到以下警告：

有什么想法吗？缺少密钥会导致这种行为吗？

对不起，我不是这方面的专家，但可以为您提供任何需要的信息，帮助我确定它为什么会这样

问候

【问题讨论】：

【解决方案1】：

要加载Google Maps JavaScript API，请使用如下示例中的脚本标记：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>

script 标记中包含的 URL 是 JavaScript 文件的位置，该文件加载您使用 Maps JavaScript API 所需的所有符号和定义。这个script 标签是必需的。

async 属性允许浏览器在加载 Maps JavaScript API 时呈现您网站的其余部分。当 API 准备就绪时，它将调用使用 callback 参数指定的函数。

【讨论】：

Rebot 先生，我已将脚本添加为 sugested，我的页面如下链接所示：onedrive.live.com/… 如您所见，地图区域不可见，但如果我点击它，我设法检索位置值。一旦我点击 F12 进入调试模式，地图就会出现：onedrive.live.com/… 知道发生了什么吗？

【解决方案2】：

在执行initMap() 时，谷歌地图的元素必须可见

【讨论】：

【解决方案3】：

我发现这是一个与引导程序上的选项卡式界面有关的问题（在 openlayers 中渲染 a！）它不会显示（ol-unselectable 类是 display:none）

我不得不像这样绕过它

$("a[href='#tab-map-was-on']").on('shown.bs.tab', function(e) {
    map.updateSize(); 
});

这影响了 chrome 和 firefox。关于openlayers映射

似乎需要触发 RESIZE 事件。控制台来回翻转会触发调整大小。由于标签移动未被检测为调整大小，因此您需要手动触发它

【讨论】：