jquery - Thickbox 和 Google map 链接

Question

我正在使用 jQuery 的thickbox，并希望将其用于 Google map 链接。

我所看到的方法不适用于我正在使用的链接 (URL) 格式。

网址格式:

http://maps.google.com/?q=1200宾夕法尼亚大道 SE，华盛顿哥伦比亚特区，20003

所以如果我使用这个:

<a class='thickbox' href='http://maps.google.com/?q=1200 Pennsylvania Ave SE, Washington, District of Columbia, 20003'>
   Map
</a>

它只是重定向到 Google map 页面，而不是使用 Google map 打开弹出窗口。我正在尝试将 ajax 调用附加到 URL

?height=300&width=300

但它不起作用

Answer 1

我正在发布一个单独的答案，因为有一种不同的方法来完成此操作 - 不需要在 Thickbox 中包含整个 google map 页面 - 我们只需要 map 本身。

此方法将 map 放置在页面上的隐藏 iframe 中。这就是Thickbox的“内联内容”方法。

<a href="#TB_inlinemodalContent?height=410&width=505&inlineId=hiddenDiv" title="add a caption to title attribute / or leave blank" class="thickbox">Show hidden modal content.</a>

<div id="hiddenDiv" style="display:none;">
    <iframe width="500" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?q=1200 Pennsylvania Ave SE, Washington, District of Columbia, 20003&amp;t=h&amp;output=embed"></iframe>
</div>

通过添加 output=embed，我们只在 iframe 中获得 map 本身。 t=h 使其成为卫星 map 。您可以将这些添加到原始方法中的链接中(直接打开 iframe)，但混合 Google map 和 Thickbox 的 URL 参数似乎会有点困惑。