javascript - 动态设置 googleapi key

Question

我有一个应用程序想要嵌入谷歌地图，并且需要将 key 放入配置文件中。所以这就是我所做的:

在 config.js 中

GOOGLE_MAP_KEY = "mykeyofgoogleapi";

在 index.html 中

<script type="text/javascript" 
        src="https://maps.googleapis.com/maps/api/js?key="+GOOGLE_MAP_KEY+"&sensor=true">
</script>

问题是我看到 google 的 GET URL 只是

Request URL:  https://maps.googleapis.com/maps/api/js?key=

URL 的其余部分丢失了。

看起来我在像这样连接 URL 时做了一些坏事。怎么了？

Answer 1

您在何处指定 <script>标记，您编写的是 HTML 而不是 Javascript(即使您使用它来加载 JS 文件)。所以你不能在 HTML 中引用 Javascript 变量。

要执行此操作，您需要使用 javascript 而不是 HTML 加载 Google Maps JS。例如，请参阅他们在文档中的示例: https://developers.google.com/maps/documentation/javascript/examples/map-simple-async

<script>
var GOOGLE_MAP_KEY = "mykeyofgoogleapi";

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

window.onload = loadScript;
</script>