包括 chrome 包应用程序中的谷歌地图答案

【问题标题】：including google maps in chrome packages app包括 chrome 包应用程序中的谷歌地图
【发布时间】：2014-09-02 19:33:56
【问题描述】：

我在尝试将 Google 地图包含在我的 chrome 打包应用程序中时遇到了困难。我遇到了内容安全错误，我明白了原因，但我就是不知道如何“安全地”包含地图。

我的代码：

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，但我在代码中看不到任何与我正在尝试做的事情相似的东西。

【问题讨论】：

你看过developer.chrome.com/apps/app_external#external吗？该示例创建了一个<img> 元素，但也许您可以对<script> 标记执行相同操作。
是的，谢谢，这就是我提到沙盒内容的地方。即使我将地图沙箱化并嵌入 iframe 或加载到单独的窗口中，它也会抱怨无法使用 document.write，我认为这就是沙箱化的全部意义......confused.com
document.write 是 not available in Chrome apps。如果您想加载外部资源，您应该考虑将sandbox 页面嵌入到您的页面中。
我已经对其进行了沙箱处理，但仍然抱怨 document.write .. ?
它似乎不喜欢包含 jquery？

标签： google-chrome-app

【解决方案1】：

我遇到了类似的问题。这是我解决它的方法。

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

在您的 iframe html 中使用来自此 example 的代码，并替换 google map 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>

【讨论】：

【解决方案2】：

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

两者都有一个带有

的“main.html”

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

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

【讨论】：