添加 google 映射 Api 到使用 Bower 和 Grunt 构建的项目

Question

我正在使用 Yeoman webapp 生成器 (https://github.com/yeoman/generator-webapp) and I've added the Bower package GMAPS (https://github.com/hpneo/gmaps)。将 Gmaps 添加到我的项目后，我在我的项目顶部添加了 Google Api link

<!-- build:css(.tmp) styles/main.css -->
    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->

问题是，当我使用 Grunt Serve 命令时，我看到我的 Gmaps 出现在我的本地主机上运行的网站上。如果我 Grunt 并构建我的项目，它总是给我一个错误，即在我的 main.js 文件中找不到变量 Gmaps（用于触发 Gmaps 插件）。

所以我的问题是：如何将 API 添加到使用 Grunt 构建的项目中？

Answer 1

您需要在 index.html 中的生成器标签外复制 google api link。例如：

<script src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
<!-- build:js(.) scripts/vendor.js -->
</script>
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
</script>
<!-- endbower -->

添加 google 映射 Api 到使用 Bower 和 Grunt 构建的项目

Adding google maps Api to a project build with Bower & Grunt

javascript

google-maps-api-3

gruntjs

yeoman

bower