使用 Phonegap 7.0.1 打开谷歌地图答案

【问题标题】：Open Google Maps with Phonegap 7.0.1使用 Phonegap 7.0.1 打开谷歌地图
【发布时间】：2018-03-30 06:48:21
【问题描述】：

在以前的 Phonegap 版本中，我曾经从应用程序中打开谷歌地图，只需使用 href 和 url 打开，就像这样 https://www.google.com/maps/dir/?api=1&origin=43.9815648,7.5328161&destination=41.802425,12.6021389

但我注意到，在 Phonegap 7 中，当我点击 href 元素时，什么也没有发生。为什么？

如何解决这个问题并使用给定的行程打开谷歌地图？

【问题讨论】：

标签： google-maps cordova href phonegap

【解决方案1】：

您可以加载的页面、您可以加载的脚本等现在由 CSP（内容安全策略）控制，而不仅仅是 config.xml 中的旧白名单机制。因此，如果您想访问页面，您必须设置您的Content Security Policy appropriately。要使用 Google 地图，您至少需要将 google.com 添加到默认 src，将 gstatic.com 添加到数据。这些可能还不够，如果您可能不是唯一的选择是查看开发人员控制台中的错误，请参阅here 如何在 Android 上获取 Chrome 开发人员控制台，以及here 在 iOS 上查看它。我总是发现需要大量的反复试验才能将 CSP 设置得恰到好处。

<meta http-equiv="Content-Security-Policy" content="default-src 'self' google.com data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline' google.com; media-src *">

也就是说，您可能不希望 Google 地图控制您的应用程序（或者您可能会这样做？），因此建议您使用 In App Browser 插件的其他建议。它只是添加一个plugin 并使用一些javascript打开窗口：

cordova.InAppBrowser.open('https://www.google.com/maps/dir/?api=1&origin=43.9815648,7.5328161&destination=41.802425,12.6021389', '_blank', 'location=yes');

【讨论】：

您在哪里插入您发布的第一行代码？在 index.html 文件中还是在其他地方？
@PieroAlberto 是的，它位于索引文件的头部。如果您创建一个新的 cordova/phonegap 项目（“cordova create newproject”），它将创建一个示例 index.html 供您查看——但您必须根据需要适当调整 CSP。
如果我使用您的 CSP 设置，我会收到此错误消息：“拒绝将字符串评估为 JavaScript，因为 'unsafe-eval' 不是以下内容安全策略指令中允许的脚本来源：” default-src 'self' google.com 数据：差距：ssl.gstatic.com"。为什么？
这似乎没问题：ssl.gstatic.com; style-src 'self' 'unsafe-inline' google.com; media-src *">

【解决方案2】：

出于安全原因，您不能将 Cordova/PhoneGap 视图重定向到托管在其他地方（而不是手机上）的页面，因此您有两种选择：

为 Google 地图使用 Cordova/PhoneGap 插件，例如： https://www.npmjs.com/package/cordova-plugin-googlemaps
使用 Cordova/PhoneGap 应用内浏览器插件启动您的地图在应用程序的全屏浏览器窗口中： https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-inappbrowser/

选项 #1 将是首选选项。

【讨论】：

我的解决方案曾经使用旧的phonegap，所以，我认为，这是最后一个版本的新功能。使用选项 #1，我可以打开行程吗？
我看到你有 data= 并且 #1 的文档说 google.maps.Data 不可用。在这种情况下，您最好尝试选项 #2 并保持 URL 不变。

【解决方案3】：

如果您想启动 Google 地图应用（而不是将 Google 地图嵌入到您的应用中，即cordova-plugin-googlemaps），您可以使用phonegap-launch-navigator 插件。

【讨论】：

好主意。值得注意的是，这仅在将 Google 地图作为应用安装时才有效。