使用 Phonegap 将 Google 我的地图嵌入 iframe

【问题标题】：Embedding Google My Maps in an iframe with Phonegap使用 Phonegap 将 Google 我的地图嵌入 iframe
【发布时间】：2017-01-15 02:39:24
【问题描述】：

我正在尝试将地图嵌入到我的 Phonegap 应用中。当我在浏览器中测试它时效果很好。该应用程序中的所有内容在 Xcode iOS 模拟器中也能完美运行。但是，当我尝试嵌入地图并在模拟器中查看时，地图根本不会出现。附上相关的html：

<div id="map-container">
    <iframe src="https://www.google.com/maps/d/embed?mid=1WVW2iTQgoHSU1Bm3DkQJtlVYSAU" width="640" height="480" frameborder="none"></iframe>
</div>

这是在 Safari 中正常工作的页面图片：

这是在 Xcode 的 iPhone 模拟器中没有加载地图的页面图片（等待一段时间后）：

【问题讨论】：

标签： javascript ios cordova google-maps

【解决方案1】：

尝试将其添加到 config.xml 文件中

<allow-navigation href="*"/>

如果仍然无法正常工作，请将框架规则添加到“Content-Security-Policy”

frame-src * gap://ready 'unsafe-inline' 'unsafe-eval';

我正在以这种形式使用它并带有动态内容

function AddMap() {
// The Url
var mapUrl = "http://www.google.com/maps/d/embed?mid=1WVW2iTQgoHSU1Bm3DkQJtlVYSAU";
// The iframe, don't forget to use the sandbox options
var iframe = '<iframe src="' + mapUrl + '&ll=38.66174332764711%2C-121.12734470700838&z=18" id="frameMap" width="640" height="480" sandbox="allow-same-origin allow-scripts"></iframe>';
var doc = '<!DOCTYPE html><html><body>' + iframe + '</body></html>';

// Assign it to the div
$("#map-container").html(doc);
// Write to log when is full loaded
$("#frameMap").load(function () {
    console.log("Frame loaded.");
});
}

【讨论】：