动态设置googleapi密钥

dynamically set googleapi key

本文关键字：密钥 googleapi 设置 动态      更新时间：2023-09-26

我有一个应用程序要嵌入谷歌地图，这是需要的关键是放入配置文件。下面是我所做的:

在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>

问题是，我看到GET URL到谷歌只有

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

URL的其余部分丢失。

看起来我在连接URL时做了一些不好的事情。怎么了?

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

要做到这一点，你需要使用javascript加载Google Maps JS，而不是HTML。请看他们在文档中的例子: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>

不能像这样在HTML中使用+操作符。它是一个JavaScript操作符。由于HTML不识别+，它只是在key=处终止字符串。

另一个解决方案是在JavaScript中使用Ajax导入url。

请参阅此文档以获取更多详细信息:https://api.jquery.com/jquery.getscript/。这需要使用jQuery

你必须动态加载你的脚本。

您也可以考虑使用最新版本的Maps API (v3):

相关文章：