AngularJs 应用程序中的 Google 地图 api 加载/安装失败答案

【问题标题】：Google maps api load/install fails in AngularJs appAngularJs 应用程序中的 Google 地图 api 加载/安装失败
【发布时间】：2016-10-11 07:32:30
【问题描述】：

我正在尝试在 Angularjs 应用程序中使用谷歌地图，如下所述：http://angular-ui.github.io/angular-google-maps/#!/use

我按照所有步骤操作，但出现以下错误：

我的 index.html 有以下顺序的脚本：

<!-- ionic/angularjs js -->
<script src='lib/loadash/dist/lodash.js'></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-messages/angular-messages.js"></script>
<script src="lib/angular-route/angular-route.js"></script>
<script src="lib/angular-cookies/angular-cookies.js"></script>
<script src="lib/angular-sanitize/angular-sanitize.js"></script>
<script src="lib/angular-animate/angular-animate.js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>

<script src='lib/angular-simple-logger/dist/angular-simple-logger.min.js'></script>
<script src='lib/angular-google-maps/dist/angular-google-maps.min.js'></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

在我的 app.js 中，我将其配置如下：

swarmsApp.config(function($stateProvider, $urlRouterProvider, $httpProvider, uiGmapGoogleMapApiProvider) {

uiGmapGoogleMapApiProvider.configure({
    //    key: 'your api key',
    v: '3.20', //defaults to latest 3.X anyhow
    libraries: 'weather,geometry,visualization'
});

在我的控制器中：

.controller('FarmersCtrl', ['$scope','$http', 'uiGmapGoogleMapApi', function($scope, $http, uiGmapGoogleMapApi) {

$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };

出了什么问题？

更新：通过在<script src='lib/angular-google-maps/dist/angular-google-maps.js'></script> 之前包含<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script> 解决了此错误，但它似乎不推荐使用。

这导致了另一个错误：

【问题讨论】：

标签： angularjs google-maps google-maps-api-3 ionic-framework

【解决方案1】：

缺少一个库。我认为您需要 lodash 用于角度谷歌地图。查看给定库链接中的代码 sn-p：

<script src='/path/to/lodash[.min].js'></script>
<script src='/path/to/angular[.min].js'></script>
<script src='/path/to/angular-simple-logger/angular-simple-logger[.min].js'></script>
<script src='/path/to/angular-google-maps[.min].js'></script>

包含库并重试。谢谢。

【讨论】：

哦，你后来添加的。我猜它不在那里。通常下划线是由于在应用程序中不包含 lodash 导致的未定义错误。您能否再次检查该库是否正确加载。谢谢。
从第二个错误我看起来你需要一个 api 密钥。从谷歌开发者控制台获取地图 api 密钥并将其包含在 url 中，然后重试。谢谢。
我创建了一个键并在 index.js 中将其添加为：MYKEY 实际上是一个长字符串的价值。 Howeevr 错误仍然存在，还有一个错误指出 initmap 不是函数
所以现在api key问题解决了。所以现在错误正在显示，因为您的 init map 方法在加载谷歌地图 js 之前加载。你能在谷歌地图加载它的js之后加载你的初始化地图代码吗？告诉我。
问题已通过以下方式解决。看起来像你提到的 lodash.js 没有正确加载，但是不知道为什么！不过谢谢！

【解决方案2】：

我提到了这篇文章： http://codepen.io/netsi1964/post/angularjs-google-maps-directive 并将 lib 文件夹中下载的 loadash 替换为

<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>

【讨论】：