Question

我想使用angular-google-map api，但收到错误："Error: $injector:modulerr Module Error"

我想使用浏览器密钥测试Google-map-api。我得到了这个教程形式How to use google-map-key

我试图跑但是犯了错误。请参阅演示，了解如何使用Google-Map Key DEMO

Answer 1

版本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）

Answer 2

似乎在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>

获取错误“错误：$ injector：modulerr模块错误”

2 个答案: