Question

我是Angular的新手。我一直在尝试加载谷歌地图，但它仍然无法正常工作。我在网上找到了一个链接，并按照他们使用的所有步骤进行操作，但仍然无法加载。我也试过在网上找到的其他样本，但它仍然失败。这是我所遵循的文件的链接：

http://www.saintsatplay.com/blog/2015/03/using-google-maps-in-angular-js#.VmLTBaeIZCU

的index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.min.css" type="text/css" />
    <style>
        .angular-google-map-container {
            height: 300px; // Or whatever pixel value you require :)
        }
    </style>

    <script src="components/jquery/dist/jquery.min.js"></script>
    <script src="components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="components/angular/angular.min.js"></script>
    <script src="components/angular-route/angular-route.min.js"></script>
    <script src="components/angular-resource/angular-resource.min.js"></script>
    <script src="http://js.pusher.com/2.2/pusher.min.js"></script>

    <script type="text/javascript" src="scripts/main.js"></script>
    <script src="http://maps.google.com/maps/api/js"></script>
    <script type="text/javascript" src="scripts/lodash.min.js"></script>
    <script type="text/javascript" src="scripts/controllers/Drivermap_controllers.js"></script>        
</head>
<body ng-app='driverapp'>
    <div ng-view>
    </div>
</body>
</html>

Drivermap_controllers.js

"use strict";
var app = angular.module('driverapp', ['uiGmapgoogle-maps'])
    .config(function(uiGmapGoogleMapApiProvider) {
        uiGmapGoogleMapApiProvider.configure({
            key: '***********',
            v: '3.17',
            libraries: 'weather,geometry,visualization'
        });
    })
    .controller("DrivermapController", 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 };
        });
    });

main.js ：

var app = angular.module('driverapp', ['ngRoute','ngResource']);

app.config(function($routeProvider){
    $routeProvider
        .when('/customers', {
            templateUrl: 'views/customers/new.html',
            controller: 'CustomersListController'
        })
        .when('/drivermap', {
            templateUrl: 'views/drivermap/new.html',
            controller: 'DrivermapController'
        })
        .otherwise({
            redirectTo: '/customers'
        });
});

视图/ drivermap / new.html ：

 <div ng-controller="DrivermapController">
    <ui-gmap-google-map center="map.center" options="options" zoom="map.zoom"></ui-gmap-google-map>
</div>

控制台中出现

错误：

错误：[$ injector：modulerr] http://errors.angularjs.org/1.4.8/ $ injector / modulerr？p0 = driverapp＆amp; p1 =％5B％24injector％3Amodulerr％5D％20http％3A％2F％2Ferrors.angularjs.org％2F1。 4.8％2F％24injector％2Fmodulerr％3Fp0％3DuiGmapgoogle-地图％26P1％3D％255B％2524injector％253Anomod％255D％2520http％253A％252F％252Ferrors.angularjs.org％252F1.4.8％252F％2524injector％252Fnomod％253Fp0％ 253DuiGmapgoogle-地图％250AG％252F％253C％2540http％253A％252F％252Flocalhost％253A9001％252Fcomponents％252Fangular％252Fangular.min.js％253A6％253A416％250Ade％252F％253C％252F％253C％252F％253C％2540http％ 253A％252F％252Flocalhost％253A9001％252Fcomponents％252Fangular％252Fangular.min.js％253A24％253A186％250Ab％2540http％253A％252F％252Flocalhost％253A9001％252Fcomponents％252Fangular％252Fangular.min.js％253A23％253A251％250Ade％ 252F％253C％252F％253C％2540http％253A％252F％252Flocalhost％253A9001％252Fcomponents％252Fangular％252Fangular.min.js％253A23％253A1％250Ag％252F％253C％2540http％253A％252F％252Flocalhost％253A9001％252Fcomponents％ 252Fangular％252Fangular.min.js％253A38％253A117％250An％2540http％253A％252F％252Flocalho ST％253A9001％252Fcomponents％252Fangular％252Fangular.min.js％253A7％253A331％250Ag％2540http％253A％252F％252Flocalhost％253A9001％252Fcomponents％252Fangular％252Fangular.min.js％253A37％253A488％250Ag％252F％253C％ 2540http％253A％252F％252Flocalhost％253A9001％252Fcomponents％252Fangular％252Fangular.min.js％253A38％253A134％250An％2540http％253A％252F％252Flocalhost％253A9001％252Fcomponents％252Fangular％252Fangular.min.js％253A7％253A331％ 250Ag％2540http％253A％252F％252Flocalhost％253A9001％252Fcomponents％252Fangular％252Fangular.min.js％253A37％253A488％250Aeb％2540http％253A％252F％252Flocalhost％253A9001％252Fcomponents％252Fangular％252Fangular.min.js％253A41％ 253A249％250Ayc％252Fc％2540http％253A％252F％252Flocalhost％253A9001％252Fcomponents％252Fangular％252Fangular.min.js％253A19％253A463％250Ayc％2540http％253A％252F％252Flocalhost％253A9001％252Fcomponents％252Fangular％252Fangular.min。 JS％253A20％253A274％250AZd％2540http％253A％252F％252Flocalhost％253A9001％252Fcomponents％252Fangular％252Fangular.min.js％253A19％253A83％250A％2540http％253A％252F％252Flocalhost％ 253A9001％252Fcomponents％252Fangular％252Fangular.min.js％253A294％253A192％250An.Callbacks％252Fj％2540http％253A％252F％252Flocalhost％253A9001％252Fcomponents％252Fjquery％252Fdist％252Fjquery.min.js％253A2％253A26920％250An。回调％252Fk.fireWith％2540http％253A％252F％252Flocalhost％253A9001％252Fcomponents％252Fjquery％252Fdist％252Fjquery.min.js％253A2％253A27738％250A.ready％2540http％253A％252F％252Flocalhost％253A9001％252Fcomponents％252Fjquery％ 252Fdist％252Fjquery.min.js％253A2％253A29530％250AI％2540http％253A％252F％252Flocalhost％253A9001％252Fcomponents％252Fjquery％252Fdist％252Fjquery.min.js％253A2％253A29721％250A％0AG％2F％3C％40http％ 3A％2F％2Flocalhost％3A9001％2Fcomponents％2Fangular％2Fangular.min.js％3A6％3A416％0Ag％2F％3C％40http％3A％2F％2Flocalhost％3A9001％2Fcomponents％2Fangular％2Fangular.min.js％3A38％ 3A391％0AN％40http％3A％2F％2Flocalhost％3A9001％2Fcomponents％2Fangular％2Fangular.min.js％3A7％3A331％0Ag％40http％3A％2F％2Flocalhost％3A9001％2Fcomponents％2Fangular％2Fangular.min.js％ 3A37％3A488％0Ag％2F％3C％40http％3A％2F％2Flocalhost％3A9001％2Fcomponen TS％2Fangular％2Fangular.min.js％3A38％3A134％0AN％40http％3A％2F％2Flocalhost％3A9001％2Fcomponents％2Fangular％2Fangular.min.js％3A7％3A331％0Ag％40http％3A％2F％2Flocalhost％ 3A9001％2Fcomponents％2Fangular％2Fangular.min.js％3A37％3A488％0Aeb％40http％3A％2F％2Flocalhost％3A9001％2Fcomponents％2Fangular％2Fangular.min.js％3A41％3A249％0Ayc％2FC％40http％3A％ 2F％2Flocalhost％3A9001％2Fcomponents％2Fangular％2Fangular.min.js％3A19％3A463％0Ayc％40http％3A％2F％2Flocalhost％3A9001％2Fcomponents％2Fangular％2Fangular.min.js％3A20％3A274％0AZd％40http％ 3A％2F％2Flocalhost％3A9001％2Fcomponents％2Fangular％2Fangular.min.js％3A19 3A83％％0A％40http％3A％2F％2Flocalhost％3A9001％2Fcomponents％2Fangular％2Fangular.min.js％3A294％3A192％0AN。回调％2Fj％40http％3A％2F％2Flocalhost％3A9001％2Fcomponents％2Fjquery％2Fdist％2Fjquery.min.js％3A2％3A26920％0An.Callbacks％2Fk.fireWith％40http％3A％2F％2Flocalhost％3A9001％2Fcomponents％ 2Fjquery％2Fdist％2Fjquery.min.js％3A2％3A27738％0A.ready％40http％3A％2F％2Flocalhost％3A9001％2Fcomponents％2Fjquery％2Fdist％2Fjquery.min.js％3A2％3A29530％0AI％40http％3A％ 2F％2Floca lhost％3A9001％2Fcomponents％2Fjquery％2Fdist％2Fjquery.min.js％3A2％3A29721％0A

Answer 1

我怀疑（在您的评论中，您没有提供完整的控制台错误）您使用2.2.X版本angular-google-maps，此版本对angular-simple-logger有额外的依赖性。解决方案是明确添加对angular-simple-logger的引用，修改index.html文件：

<script src="https://rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.js"></script>

Plunker

Angular.js无法加载Google地图

1 个答案: