Javascript 如何为谷歌地图制定谷歌Api内容安全策略_Javascript_Html_Google Maps_Google Maps Api 3_Electron

Javascript 如何为谷歌地图制定谷歌Api内容安全策略

javascript html google-maps google-maps-api-3 electron

Javascript 如何为谷歌地图制定谷歌Api内容安全策略,javascript,html,google-maps,google-maps-api-3,electron,Javascript,Html,Google Maps,Google Maps Api 3,Electron,我正在尝试使用Electron.js制作一个小应用程序，并尝试在其中添加一个谷歌地图页面。我已经获得了一个API密钥。当我运行应用程序时，它会短暂地显示一张谷歌地图的图片，然后弹出错误：“哎呀！出了点问题。此页面未正确加载Google地图。有关技术详细信息，请参阅JavaScript控制台。“ 当我打开控制台时，我看到错误： "security-warnings.ts:179 Electron Security Warning (Insecure Content-Security-Policy

我正在尝试使用Electron.js制作一个小应用程序，并尝试在其中添加一个谷歌地图页面。我已经获得了一个API密钥。当我运行应用程序时，它会短暂地显示一张谷歌地图的图片，然后弹出错误：“哎呀！出了点问题。此页面未正确加载Google地图。有关技术详细信息，请参阅JavaScript控制台。“ 当我打开控制台时，我看到错误：

"security-warnings.ts:179 Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security
    Policy set or a policy with "unsafe-eval" enabled. This exposes users of
    this app to unnecessary security risks.

For more information and help, consult
https://electronjs.org/docs/tutorial/security.
This warning will not show up
once the app is packaged.
(anonymous) @ security-warnings.ts:179
Promise.then (async)
warnAboutInsecureCSP @ security-warnings.ts:172
logSecurityWarnings @ security-warnings.ts:295
loadHandler @ security-warnings.ts:312
async function (async)
loadHandler @ security-warnings.ts:311
load (async)
securityWarnings @ security-warnings.ts:315
(anonymous) @ init.ts:216
./lib/renderer/init.ts @ init.ts:217
__webpack_require__ @ bootstrap:19
(anonymous) @ bootstrap:83
(anonymous) @ bootstrap:83
NativeModule.compile @ internal/bootstrap/loaders.js:287
NativeModule.compileForPublicLoader @ internal/bootstrap/loaders.js:222
loadNativeModule @ internal/modules/cjs/helpers.js:23
Module._load @ internal/modules/cjs/loader.js:699
Module._load @ electron/js2c/asar.js:717
Module._load @ electron/js2c/asar.js:717
Module.runMain @ internal/modules/cjs/loader.js:1038
(anonymous) @ internal/main/run_main_module.js:17
js?key=MY_API_KEY&callback=initMap:56 Google Maps JavaScript API error: ApiNotActivatedMapError
https://developers.google.com/maps/documentation/javascript/error-messages#api-not-activated-map-error
_.od @ js?key=MY_API_KEY&callback=initMap:56
(anonymous) @ common.js:73
(anonymous) @ common.js:149
c @ common.js:67
(anonymous) @ AuthenticationService.Authenticate?1sfile%3A%2F%2F%2FUsers%2Fisaiahbell%2FProjects%2Fgeo-app%2Fmap.html&MY_API_KEY&callback=_xdc_._m2aezz&key=YOUR_API_KEY&token=54562:1"

我目前的代码如下：

Index.html

 <!DOCTYPE html>
    <html>
      <head>
        </head>
      <body>


        <center>
          <a href="map.html">Open Maps</a>
        </center>








         <script src="./render.js"></script>
      </body>
    </html>




    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    type="text/javascript"></script>

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">


        <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
      </head>
      <body>

map.html：

<!DOCTYPE html>

<html>

  <head>



    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple Markers</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>



  </head>
  <body>
    <button><a href="index.html">Go Back</a><</button>
    <div id="map"></div>
    <script>

      function initMap() {
        var myLatLng = {lat: -25.363, lng: 131.044};

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: myLatLng
        });

        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: 'Hello World!'
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY">
    </script>
  </body>
</html>


简单标记
/*始终明确设置贴图高度以定义div的大小
*包含映射的元素*/
#地图{
身高：100%；
}
/*可选：使示例页面填充窗口*/
html，正文{
身高：100%；
保证金：0；
填充：0；
}
请注意，您将遇到以下错误：
Google Maps JavaScript API错误：ApinoActivatedMapError

这意味着您需要在项目中使用JavaScript API
如果一旦启用，您将遇到与CSP相关的错误，这些错误将阻止地图加载，然后请签出
希望这有帮助
 请注意，您会遇到以下错误：
Google Maps JavaScript API错误：ApinoActivatedMapError

这意味着您需要在项目中使用JavaScript API
如果一旦启用，您将遇到与CSP相关的错误，这些错误将阻止地图加载，然后请签出
希望这有帮助
 我已从您的答案中删除了您的API密钥。请不要在公共站点上共享私有API密钥，并确保根据我已从您的答案中删除您的API密钥对其进行限制。请不要在公共站点上共享私有API密钥，并确保按照