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'数据：gap：https://ssl.gstatic.com'unsafe-eval'“。请注意，'script-src'未明确设置，因此'default-src'用作后备。

我的内容 - 安全策略是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>

然后，在控制器中，在容器中添加GoogleMaps 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/*的代码在这个示例中，Il打开了所有内容的CSP，这对真正的应用程序来说不是一件好事：

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

瞧！

谷歌是爱，谷歌就是生命：）

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

1 个答案: