phonegap 上的传单空白地图答案

【问题标题】：leaflet blank map on phonegapphonegap 上的传单空白地图
【发布时间】：2018-04-14 01:39:47
【问题描述】：

我的传单有电话间隙问题。我有一个 phonegap 应用程序，它只显示一张传单地图。

<html>

<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-    scale=1, minimum-scale=1, width=device-width, height=device-height, target-    densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="leaflet/leaflet.css" />
<title>Basic Leaflet Mobile Map</title>
</head>

<body>
<div class="app">
<div id="map"></div>

</div>
<script src="leaflet/leaflet.js"></script>
<script>
var map = L.map('map').setView([52.04, -0.73], 12);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18
}).addTo(map);
</script>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>

</html>

当我这样做时，这似乎很有效：

phonegap serve

然后我在 chrome 上查看页面。

但是当我尝试通过 PhoneGap Developper 查看我的应用程序时，地图没有加载...知道吗？我有传单工具（缩放等）的所有按钮，但没有地图。

谢谢

PS：我对 openlayers 也有同样的问题。

【问题讨论】：

听起来像是whitelist 的问题。

标签： cordova leaflet openlayers phonegap

【解决方案1】：

我认为您的问题是外部内容的负载，您正在调用平铺地图服务的链接，在这种情况下为 OpenStreetMap：

'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'

由于 Cordova 的安全策略，您需要添加一个白名单以允许外部 URL 访问应用程序。

您可以添加一个名为 "cordova-plugin-whitelist" 的插件，然后在 Config.xml 中添加您将允许的协议

在您的项目中安装cordova-plugin-whitelist：
```
cordova plugin add cordova-plugin-whitelist
```
在您的 Config.xml 中添加允许意图：
然后在您的设备或安卓模拟器上运行应用程序

希望它对你有用。

【讨论】：