谷歌地图js api v3：街景全景加载完成？答案

【问题标题】：Google maps js api v3: StreetView Panorama finished loading?谷歌地图js api v3：街景全景加载完成？
【发布时间】：2011-08-09 21:19:49
【问题描述】：

我的街景有些问题。我只想在完成加载后显示街景，以便不显示灰色。我搜索了api，但我认为没有任何事件可以使用：Documentation

是否有任何方式（包括非官方方式）在街景完全加载后显示？谢谢！

【问题讨论】：

同步加载API是否正常？
我认为应该可以。检查以下链接jsfiddle.net/wK5Hq/23
@vinod_vh：你意识到你的例子在街景显示半秒之前就变灰了吗？
@DavidMulder 你只想在完成加载后显示街景，但在加载之前你必须在那个地方显示一些背景颜色对..？
嗯，对于任何一旦加载就会触发的事件来说，这是一个普遍的问题，所以在我的情况下，我想在它上面显示一个叠加层，其他人可能希望只用一个加载器来保持地图可见可见并在完成加载后显示街景。这个问题已经收到了大约 800 次浏览，这就是为什么我决定悬赏这个问题，因为似乎我不是唯一一个想要这样做的人。

标签： javascript google-maps google-maps-api-3 google-street-view

【解决方案1】：

在加载地图后隐藏 div 并使 div 可见应该可以解决问题...

喜欢这个

<div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;visibility:hidden;"></div>

<script> google.maps.event.addDomListener(window, 'load',initialize);
setTimeout('showPano()',1000);
function showPano(){
document.getElementById('pano').style.visibility='visible';}
</script>

希望对你有帮助

【讨论】：

【解决方案2】：

我做了一些测试（vinod_vh 的编辑示例，参见http://jsfiddle.net/nDwSC/2/），发现links_changed 事件是最后一个启动的：

červen 2013 17:48:28.775 ===== 点击发生 ===== /nDwSC/2/show/（第 210 行）

červen 2013 17:48:28.780 调整大小 /nDwSC/2/show/（第 170 行）

červen 2013 17:48:28.843 zoom_changed /nDwSC/2/show/（第 173 行）

červen 2013 17:48:29.603 pano_changed /nDwSC/2/show/（第 158 行）

červen 2013 17:48:29.622 position_changed /nDwSC/2/show/（第 161 行）

červen 2013 17:48:29.634 链接已更改

所以你可能真的想使用这个事件！它也会在不同的上下文中启动，但您可以通过设置一些标志变量来处理这个问题，当您单击按钮时会设置该变量，并在处理程序中进行测试，可能会超时。

那么，你应该怎么做：

隐藏您的街景；但不要使用display: none，使用技巧使用 jQuery UI there is it doesn't work unfortunately:

.hide { position: absolute !important; left: -10000px !important; }

保持与结果相同尺寸的隐藏框架！
处理 links_changed 事件 - 删除 hide 类，并调整地图大小。

如果您发现links_changed 事件被过早触发，则没有其他可能通过处理事件来干净利落地完成此操作。 You cannot even use the map idle event（和idle 的google.maps.StreetViewPanorama 事件不存在）。所以最后的手段可能是使用一些固定的超时时间——这非常有效！

【讨论】：

虽然你的方法听起来确实不错，但在实际执行时，可以看到 links_changed 早早就被触发了：jsfiddle.net/fLTEm/1/embedded/result（触发事件时黑色覆盖消失）
@DavidMulder - 好吧，我测试了所有可用的事件，但显然没有任何效果。研究有时会以死胡同结束，但这也是结果 - 现在我们可以诚实地得出结论，这个问题没有干净的解决方案。你必须为此设置一些固定的超时时间。
这就是为什么这个问题也要求非官方方式。检查画布的颜色数据也没有成功，因为画布被污染了......

【解决方案3】：

如果您想在加载后加载全景图，为此您可以使用 iframe 并且您可以使用 AJAX 加载器进行包装，在地图加载之前不会改变，（就绪状态 ==4），（或更多ajax 加载器包装器，带有一些全局变量作为标志来了解就绪状态..，注意：这是不稳定的想法，但适用于某些浏览器）

如果你想这样做，那将是简单的方法，在 API 中，

引用事件监听器，

否则

options 在文档中有一个选项，

即

visible :: boolean :: 如果为 true，则街景全景图在加载时可见。

我希望这会让你的事情变得轻松..

我希望我已经根据您的实际要求回答了..

【讨论】：

问题是 StreetView 是由 javascript 异步加载的......所以所有这些事件实际上都会在 StreetView 加载之前被触发。