如何在不在 html 上添加脚本标签的情况下使用 google-maps-api-v3答案

【问题标题】：How to use google-maps-api-v3 without add script tag on html如何在不在 html 上添加脚本标签的情况下使用 google-maps-api-v3
【发布时间】：2015-02-13 00:20:53
【问题描述】：

我已经使用 bower 、 gulp 和 browserify 自动化了我的前端开发。我正在使用一个名为 Gmaps 的库来处理对 google maps 的 api 调用。问题是我必须在导入 gmaps 之前在我的 html 上添加一个脚本标签。

&lt;script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"&gt;&lt;/script&gt;

我尝试从脚本链接下载 js 代码并连接到我的其他 js 文件，但没有成功，希望创建一个 all.min.js 并避免在我的网站上需要多个脚本标签。

我只能设法将脚本标签添加到 html 来完成这项工作。无论如何在级联文件中使用 google maps api 吗？

【问题讨论】：

标签： javascript google-maps-api-3 gulp frontend bower

【解决方案1】：

如果您想在文档中不使用额外 <script>-elements 的情况下使用 maps-API，答案很明显：否 maps-API 不仅使用了 1 个脚本，它还会在文档中注入更多的脚本。

但当问题与必须“手动”包含的脚本数量有关时，答案是肯定的。

可以通过回调异步加载地图 API，工作流程如下：

load the maps-API asynchronously
创建一个函数（您在步骤#1 中定义为回调的函数）
回调内部：
1. 初始化 GMaps
2. 运行通过 GMaps 创建地图的说明

window.addEventListener('load',function(){

  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3&callback=initGmaps';
  document.body.appendChild(script);
});


function initGmaps(){
   //paste here the contents of gmaps.js
   //........

   //then use GMaps
   new GMaps({
        div: '#map',
        lat: 0,
        lng: 0,
        zoom:1
       });
}

演示：http://jsfiddle.net/doktormolle/cr1w32qn/

【讨论】：

【解决方案2】：

虽然我在 Google 地图文档中找不到任何具体提及，但我认为这不是一个好主意。

对 javascript 文件的请求不是一个简单的静态库。如果您访问https://maps.google.com/maps/api/js，您会看到包含有关要使用的 Google 内部 API 版本的信息，因此如果您将其连接到您的站点 js 中，您可能会发现如果 Google 更改其内部 API 和/或版本号，它将停止工作.

如果您在浏览器中询问用户的地理位置信息，sensor=true 参数也很重要，如果您连接脚本，这些信息将会丢失。

【讨论】：

感谢您的澄清，我认为答案会是这样的。所以基本上这部分不能比这更自动化，如果我的网站使用 google maps javascript api，我将无法只有一个 js 文件。反正没什么大不了的。