Cordova + Bing 地图 + 内容安全策略

Question

我正在 VisualStudio 2015 中开发 Cordova 应用程序。我正在尝试在其中一个页面中添加 BingMaps 模块以在地图上显示特殊位置。因此，我在 index.html 中引用了它：

<script type="text/javascript" src="ms-appx:///Bing.Maps.JavaScript//js/veapicore.js"></script>

在我的控制器中，我使用以下命令：

Microsoft.Maps.loadModule(
  'Microsoft.Maps.Map',
  {
    callback: function () {/*my code here*/}
  }
);

当我启动应用程序时，出现此错误：

拒绝加载脚本 'ms-appx:///Bing.Maps.JavaScript//js/veapicore.js'，因为它违反了以下内容安全策略指令："default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'"。请注意，'script-src' 未明确设置，因此 'default-src' 用作后备。

我的 Content-Security-Policy 是默认行，由 Cordova 插入：

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

我尝试更改（并删除）这一行，但没有任何结果。

如果有帮助，我正在 Ripple

中调试应用程序

Answer 1

所以我最终放弃了 Bing，转而使用 GoogleMaps。老实说，它在第一次尝试时就像魅力一样！这么多使用 Microsoft 工具...

总之...

首先是在 index.html 中加载 gogle API :

<script src="http://maps.googleapis.com/maps/api/js"></script>

然后，在控制器中，在容器中添加 Google 地图 API（如果需要，在中心添加一个图钉：

var tmpMap = new google.maps.Map(document.getElementById('myContainer'), {
    center: {
        lat: parseFloat($scope.lat),
        lng: parseFloat($scope.long)
    },
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var tmpMarker = new window.google.maps.Marker({
  position: tmpMap.getCenter(),
  map: tmpMap,
  title: 'My Title'
});

然后，设置容器的大小（与 BingMaps 相反，Google 不会调整容器的大小。所以没有大小，您将看不到任何东西)

最后，将 CSP 设置为接受来自 googleapi.com/* 的代码在此示例中，我对所有内容都打开了 CSP，这在真正的应用程序上可不是一件好事：

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src *">

瞧！

Google是爱情，Google是生活:)

Cordova + Bing 地图 + 内容安全策略

Cordova + Bing Maps + Content Security Policy

bing-maps

cordova

content-security-policy