如何在弹出窗口中打开 Google 地图链接？答案

【问题标题】：How to open Google Maps links in a pop up window?如何在弹出窗口中打开 Google 地图链接？
【发布时间】：2013-06-21 07:21:11
【问题描述】：

我正在使用 jQuery+Phonegap 开发一个使用 Google Maps API v3 的移动网络应用程序，但我在地图上附加的链接方面遇到了一些问题。

我的问题是，是否可以在弹出窗口中打开条款和条件以及 Google 地图链接，而不是在同一个窗口中打开它们，以避免卡在没有像 Apple 那样的物理按钮的设备上。我尝试将“点击”事件附加到地图画布的子元素并更改它们的目标，但我无法实现。有解决办法吗？

谢谢。

【问题讨论】：

标签： javascript html google-maps google-maps-api-3 cordova

【解决方案1】：

这两个链接上都有target="_blank"，所以通常它们应该会自动在新窗口中打开。例如，Google 地图链接如下所示：

<a target="_blank"
   href="http://maps.google.com/maps?..."
   title="Click to see this area on Google Maps"
   style="position: static; overflow: visible; float: none; display: inline;"
>
    <div ...>
        <img ...>
    </div>
</a>

但正如您在评论中提到的那样，PhoneGap 似乎覆盖了该行为。事实上，如果你搜索：

phonegap target _blank

您会发现很多关于该主题的信息，尤其是this discussion 和this issue。

看起来他们希望人们使用PhoneGap 的InAppBrowser，但它似乎专门与window.open() 函数相关联。因此，您可以尝试将这些<a> 元素中的href 更改为使用window.open() 调用而不是简单的URL。

例如，如果您在名为 link 的变量中获得了对其中一个 <a> 元素的引用，您可以尝试：

link.href =
    "javascript:window.open( '" +
        link.href +
     "', '_blank', 'location=yes' );";

这改变了href：

http://google.com/etc.etc.

to（实际上都在一行上，为了便于阅读，此处已格式化）：

javascript:window.open(
    'http://google.com/etc.etc.',
    '_blank',
    'location=yes'
);

另一种可能性可能是this answer 中的技术在<a> 标签上使用rel="external" 并更改MainViewController。但这已被弃用，并且需要对 DOM 元素进行类似数量的摆弄。

另一种想法... 通常，摆弄这些地图和 ToS 链接的内部运作可能会被视为违反服务条款。但是，我认为您在这里可以很容易地争辩说，面对阻止它们正常工作的 PhoneGap 问题，您只是保留了这些链接的原始意图。

【讨论】：

感谢您的回答。我注意到了，但问题是由于网页使用 Phonegap 打包为原生应用程序，所有页面都在同一个窗口中打开以模拟真正的原生应用程序。所以我想以弹窗之类的方式打开它。

【解决方案2】：

在你在新标签页中打开的 window.location 中试试这个：

i.e: <a href="#" onclick="window.open('stackoverflow.com')">New Map(In new window)</a>

【讨论】：

【解决方案3】：

尝试使用ChildBrowser 插件。您仍然可能需要执行一些 JavaScript 技巧才能捕获点击并在 ChildBrowser 中打开它。

【讨论】：

【解决方案4】：

试试 PhoneGap 提供的 InAppBrowswer。

http://docs.phonegap.com/en/edge/cordova_inappbrowser_inappbrowser.md.html#InAppBrowser

【讨论】：

【解决方案5】：

已解决！我在这个答案上找到了解决方案：https://stackoverflow.com/a/16575541/2507996。它改变了捕获点击事件的链接行为并使用 PhoneGap/Cordova InAppBrowser 打开新窗口。谢谢大家的回答。

【讨论】：