谷歌地图JS API v3：街景全景加载完成？

Question

我遇到了一些有关于我的街景的问题。我希望只有在街景完全加载完成后才显示，这样就不会看到灰色的颜色。我搜索了api，但我认为没有任何事件可以使用：文档 是否有任何方法（包括非官方方式）可以在街景完全加载完后显示？谢谢！

- Johan

---

@vinod_vh：你意识到你的例子在街景显示前变灰了半秒钟吗？ - David Mulder

@DavidMulder 您想在街景加载完成后才显示它，但在加载之前，您必须在那个位置显示一些背景颜色，对吗..? - vinod_vh

这是一个普遍的问题，适用于任何一种加载后会触发的事件。在我的情况下，我想在其上显示一个覆盖层，其他人可能希望保持地图可见，只显示加载器，并在Streetview加载完成后显示它。这个问题已经获得了大约800次浏览，所以我决定对这个问题进行悬赏，因为似乎不只是我想要做这件事。 - David Mulder

街景本身基本上就是一个画布。我自己没有测试过，但理论上你可以在显示内容之前进行空值检查。 - D.J

@D.J ... 嗯~ 这可能是一个相当酷的想法，画布确实是透明的，因此循环遍历像素直到没有透明像素为止会起作用（可能仅在50x50网格上检查像素）... 仍然希望有更有效率的解决方案，但是这确实是一个可行的解决方案。 - David Mulder

Answer 1

隐藏 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>

希望它能对你有所帮助。

- Chakradhar Vyza

Answer 2

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

1. 2013年6月17日17:48:28.775 ===== 点击发生 ===== /nDwSC/2/show/（第210行）
2. 2013年6月17日17:48:28.780 调整大小 /nDwSC/2/show/（第170行）
3. 2013年6月17日17:48:28.843 缩放更改 /nDwSC/2/show/（第173行）
4. 2013年6月17日17:48:29.603 全景图更改 /nDwSC/2/show/（第158行）
5. 2013年6月17日17:48:29.622 位置更改 /nDwSC/2/show/（第161行）
6. 2013年6月17日17:48:29.634 链接已更改

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

所以，你应该做什么：

1. 隐藏你的街景；但不要使用 display: none，使用技巧 与 jQuery UI < 1.9 中的 off-left 隐藏技术相同（对于新版本不幸的是它不起作用）：

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

   保持隐藏框架与结果框架具有相同的尺寸！

2. 处理 links_changed 事件 - 移除 hide 类，并调整地图大小。

如果你发现 links_changed 事件过早触发，没有其他方法可以通过处理事件来干净地实现。 您甚至不能使用地图的 idle 事件（对于 google.maps.StreetViewPanorama 来说，idle 事件不存在）。所以最后的办法可能是使用一些固定的超时 - 这样做是完美的！

- Tomas

---

尽管您的方法听起来很好，但在实际执行过程中，links_changed被触发得太早了：http://jsfiddle.net/fLTEm/1/embedded/result/（当事件被触发时，暗色叠加层消失了） - David Mulder

@DavidMulder - 嗯，我测试了所有可用的事件，显然没有一个有效。有时研究会走到死路，但这也是一种结果 - 现在我们可以诚实地得出结论：没有干净的解决方案来解决这个问题。您必须为此设置一些固定的超时时间。 - Tomas

这就是为什么问题也要求非官方的方法。检查画布的颜色数据也行不通，因为画布会被污染... - David Mulder

Answer 3

如果您想在加载后加载全景图，可以使用iframe，并使用带有AJAX加载器的包装器，直到地图加载完成（ready state == 4），或者使用另一个带有一些全局变量作为标志以了解准备状态的ajax加载器包装器。注意：这是不稳定的想法，但在某些浏览器中可以使用。

如果您想在API中轻松实现此操作，请参考事件侦听器，

否则，

options在文档中有一个选项，

即

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

我希望这将使您的工作更加轻松。

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

- MarmiK

---

问题在于StreetView是由JavaScript异步加载的...因此所有这些事件实际上都会在StreetView加载之前被触发。 - Tomas