Question

我真的很难在我的Chrome打包应用中加入Google地图。我收到内容安全错误，我明白了，但我无法弄清楚如何“安全地”包含地图。

我的代码：

HTML：

<!DOCTYPE html>
<html>

  <head>
    <!-- libs js -->
    <script src="/libs/jquery-2.1.1.min.js"></script>
    <script src="/libs/bootstrap.min.js"></script>

    <!-- js -->
    <script src="/js/functions.js"></script>
    <script src="/js/custom.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

    <!-- css -->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="/css/custom.css">
  </head>

  <body>
    <div id="map-canvas"></div>
  </body>
</html>

在custom.js

中

$( document ).ready(function() {
    // declare the map for use
    var map;

    // init function to set up the map
    function initialize() {
        var startCoords = [40.1234, -2.1234];
        mapCenter = new google.maps.LatLng(startCoords[0], startCoords[1]);
        var mapOptions = {
            zoom: 12,
            center: mapCenter,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    };

    // init the map
    google.maps.event.addDomListener(window, 'load', initialize)

});

这是我的错误：

拒绝加载脚本 'https://maps.googleapis.com/maps/api/js?v=3.exp'，因为它违反了以下内容安全策略指令：“default-src'self' chrome-extension-resource：“。注意'script-src'没有明确表示设置，所以'default-src'用作后备。

我一直在阅读有关沙盒的内容，并尝试了一些事情，但无济于事（这是追求的途径吗？）。我也尝试了here的一些提示，但同样，没有快乐。代码中的任何指针或示例都非常受欢迎。我已经从github下载了chrome-app samples但我在代码中看不到类似于我正在尝试做的事情。

Answer 1

我正面临着类似问题。以下是我解决它的方法。

以沙盒模式将地图加载到iframe中。

使用iframe html中此example的代码，并将google地图src替换为“https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&callback=initialize”

<!DOCTYPE html>
<html>
  <head>
    <title>Asynchronous Loading</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script>
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
}

  function loadScript() {
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&callback=initialize';
      document.body.appendChild(script);
    }

window.onload = loadScript;

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

Answer 2

看看这两个例子。他们可以帮助你...

两者都有一个带有＆lt;的“main.html”。 iframe＆gt;

iframe指向带有“不安全”内容的“sandbox.html”。

正如普通海报所说，请务必查看此内容，以便您的iframe正确加载：https://developer.chrome.com/apps/app_external#external

包括Chrome包应用中的谷歌地图

2 个答案: