angular-google-maps模块未加载

时间:2016-01-14 20:56:00

标签: javascript angularjs google-maps

我有问题,无法找出为什么棱角分明看不到angular-google-maps

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=g4sMainModule&p1=Er…localhost%3A8080%2Fwebjars%2Fangularjs%2F1.4.8%2Fangular.min.js%3A19%3A463)(anonymous function) @ angular.js:38(anonymous function) @ angular.js:4458n @ angular.js:340g @ angular.js:4419eb @ angular.js:4344c @ angular.js:1676yc @ angular.js:1697Zd @ angular.js:1591(anonymous function) @ angular.js:29013j @ jquery.js:3099k.fireWith @ jquery.js:3211n.extend.ready @ jquery.js:3417I @ jquery.js:3433

html注入脚本(都是查找并加载)

    <script src="webjars/jquery/2.1.4/jquery.min.js"></script>
<script src="webjars/angularjs/1.4.8/angular.min.js"></script>
<script src="webjars/lodash/4.0.0/lodash.min.js"></script>
<script src="webjars/angularjs/1.4.8/angular-route.min.js"></script>
<script src="webjars/angularjs/1.4.8/angular-resource.min.js"></script>
<script src="webjars/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="webjars/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="webjars/angular-material/1.0.1/angular-material.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js"></script>
<script src="webjars/angular-google-maps/2.2.1/angular-google-maps.js"></script>

在模块中使用:

var module = angular.module('myModule', [ 'ngRoute','ngResource','uiGmapgoogle-maps', 'ngMaterial']);

如果我删除uiGmapgoogle-maps错误消失。

1 个答案:

答案 0 :(得分:3)

这可能与以下原因之一有关:

  • 不幸的是lodash 4 library取代了_.contains _.includes功能,至少打破了angular-google-maps.js 2.2.1的{​​{1}}版本。this thread中可以找到更多详细信息。 解决方案:您可以使用以前的版本(3.10.1),因为它与angular-google-maps库兼容
  • angular-google-maps库(版本2.2.X)包含对nemLogging模块的依赖。 解决方案:添加对nemLogging library
  • 的引用

实施例

var app = angular.module('mapApp', ['ngRoute', 'ngResource', 'uiGmapgoogle-maps']);

app.controller('mapCtrl', function ($scope, uiGmapIsReady) {
    $scope.map = {
        center: {
            latitude: 55.711898,
            longitude: 9.5387363
        },
        zoom: 12,
        options: {
        },
        control: {}
    };
});
.angular-google-map-container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-route.min.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="http://rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.js"></script>
<script src="http://rawgit.com/angular-ui/angular-google-maps/2.2.1/dist/angular-google-maps.js"></script> 
<div ng-app="mapApp" ng-controller="mapCtrl">
      <ui-gmap-google-map id="map" center="map.center" pan="map.pan" zoom="map.zoom" draggable="true" refresh="map.refresh" options="map.options" events="map.events" bounds="map.bounds" dorebuildall="true">
      </ui-gmap-google-map>
 </div>