2015-10-20 44 views
2

我想用角谷歌地图的API,但得到的错误:"Error: $injector:modulerr Module Error"

我想用的浏览器关键测试谷歌地图的API。我得到了这个教程表How to use google-map-key

我试图运行,但得到以上错误。请参阅使用Google-Map Key的演示DEMO

回答

3

谷歌地图的2.2.x版对nemLogging有额外的依赖性。如果您使用的库的非精缩版本,您会收到以下错误:

Uncaught Error: [$injector:modulerr] Failed to instantiate module customMap due to: 
Error: [$injector:modulerr] Failed to instantiate module uiGmapgoogle-maps due to: 
Error: [$injector:modulerr] Failed to instantiate module uiGmapgoogle-maps.directives.api due to: 
Error: [$injector:modulerr] Failed to instantiate module uiGmapgoogle-maps.directives.api.models.parent due to: 
Error: [$injector:modulerr] Failed to instantiate module uiGmapgoogle-maps.directives.api.models.child due to: 
Error: [$injector:modulerr] Failed to instantiate module uiGmapgoogle-maps.directives.api.utils due to: 
Error: [$injector:modulerr] Failed to instantiate module uiGmapgoogle-maps.extensions due to: 
Error: [$injector:modulerr] Failed to instantiate module uiGmapgoogle-maps.providers due to: 
Error: [$injector:modulerr] Failed to instantiate module nemLogging due to: 
Error: [$injector:nomod] Module 'nemLogging' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. 

新的依赖性在此github issue讨论。我会建议包括该新库,或使用您的指南中指定的版本(2.0.16)

0

看来the same issue已在angular-google-maps存储库中报告。该解决方案将是,以一个参考明确添加到angular-simple-logger

angular.module('appMaps', ['uiGmapgoogle-maps','nemLogging']) 
 
.config(function (uiGmapGoogleMapApiProvider) { 
 
    uiGmapGoogleMapApiProvider.configure({ 
 
     //key: 'PUT YOUR KEY HERE', 
 
     v: '3.17', 
 
     //libraries: 'weather,geometry,visualization' 
 
    }); 
 
}) 
 
.controller("mapController", function ($scope, uiGmapGoogleMapApi) { 
 

 
    // Define variables for our Map object 
 
    var areaLat = 44.2126995, 
 
     areaLng = -100.2471641, 
 
     areaZoom = 3; 
 

 
    uiGmapGoogleMapApi.then(function (maps) { 
 
     $scope.map = { center: { latitude: areaLat, longitude: areaLng }, zoom: areaZoom }; 
 
     $scope.options = { scrollwheel: false }; 
 
    }); 
 

 
});
html, body, #map_canvas { 
 
      height: 100%; 
 
      width: 100%; 
 
      margin: 0px; 
 
} 
 

 
#map_canvas { 
 
      position: relative; 
 
} 
 

 
.angular-google-map-container { 
 
      position: absolute; 
 
      top: 0; 
 
      bottom: 0; 
 
      right: 0; 
 
      left: 0; 
 
}
<script src="https://code.angularjs.org/1.3.14/angular.js"></script> 
 
<script src="http://rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-maps/2.2.1/angular-google-maps.min.js"></script> 
 
<body ng-app="appMaps"> 
 
    <div id="map_canvas" > 
 
     <div ng-controller="mapController"> 
 
      <ui-gmap-google-map center="map.center" options="options" zoom="map.zoom"></ui-gmap-google-map> 
 
     </div> 
 
    </div> 
 
</body>

相关问题