谷歌地图不加载 - Angular JS

我想用谷歌地图做一个应用程序，但是，似乎我错过了一些东西。谷歌地图不加载 - Angular JS

这里是我的代码：

<div class="container-fluid" ng-app="mapApp" ng-controller="mapCtrl"> 
    <div class="row"> 
    <div class="container-fluid"> 
     <div class="row header"> 
     <ui-gmap-google-map center='map.center' zoom='map.zoom'>{{map}}</ui-gmap-google-map> 
     </div> 
    </div> 
    </div> 
</div>

app.js：

'use strict'; 

// Declare app level module which depends on views, and components 
angular.module('mapApp', [ 
    'ngRoute' 
]).config(['locationProvider', '$routeProvider', function($locationProvider, $routeProvider) { 
    $locationProvider.hashPrefix('!'); 

    $routeProvider.otherwise({redirectTo: '/view1'}); 
}]); 
.config(function(uiGmapGoogleMapApiProvider) { 
    uiGmapGoogleMapApiProvider.configure({ 
    key: 'key', 
    v: '3.20', //defaults to latest 3.X anyhow 
    libraries: 'weather,geometry,visualization' 
    }); 
});

controller.js：

app.controller('mapCtrl', function($scope, uiGmapGoogleMapApi) { 
    //make magic 
    uiGmapGoogleMapApi.then(function(maps) { 
     $scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 }; 
    }); 
});

，我已经添加的风格：

.angular-google-map-container { 
    height: 400px; }

输出似乎没有很好地解析表达式，所以我只收到{{map}}。

我已经失去了整整一天，试图找出这一个..它可能是一些'小'我错过了。请注意，在'钥匙'下有一个合法的API密钥。

请帮忙，谢谢。

来源

2016-10-23 Deniz R.

您还需要声明uiGmapgoogle-maps模块的依赖关系，因此更换

angular.module('mapApp', [ 
    'ngRoute' 
])

与

angular.module('mapApp', [ 
    'uiGmapgoogle-maps', 
    'ngRoute' 
])

有在所提供的例子几个错字的问题，一旦被固定过，则应该被加载为例外

'use strict'; 
 

 
angular.module('mapApp', [ 
 
    'uiGmapgoogle-maps', 
 
    'ngRoute' 
 
]) 
 
.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) { 
 
    //$locationProvider.hashPrefix('!'); 
 
    //$routeProvider.otherwise({ redirectTo: '/view1' }); 
 
}]) 
 
.config(function (uiGmapGoogleMapApiProvider) { 
 
    uiGmapGoogleMapApiProvider.configure({ 
 
    //key: '', 
 
    v: '3.20', //defaults to latest 3.X anyhow 
 
    libraries: 'weather,geometry,visualization' 
 
    }); 
 
}) 
 
.controller('mapCtrl', function($scope, uiGmapGoogleMapApi) { 
 
    uiGmapGoogleMapApi.then(function(maps) { 
 
     $scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 }; 
 
    }); 
 
});

.angular-google-map-container { 
 
    height: 400px; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.0.1/lodash.js" type="text/javascript"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular.js"></script> 
 
<script src="http://cdn.rawgit.com/nmccready/angular-simple-logger/0.0.1/dist/index.js"></script> 
 
<script src="http://rawgit.com/angular-ui/angular-google-maps/2.3.2/dist/angular-google-maps.js"></script> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular-route.min.js"></script> 
 

 
<div class="container-fluid" ng-app="mapApp" ng-controller="mapCtrl"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="container-fluid"> 
 
\t \t \t \t <div class="row header"> 
 
\t \t \t \t \t <ui-gmap-google-map center='map.center' zoom='map.zoom'>{{map}}</ui-gmap-google-map> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
</div>

来源

2016-10-24 11:10:56

非常感谢！我不相信我没有分配依赖... –

将$ scope.map放在控制器中的promise之外。随着目前的设置，你应该得到一个错误 - “角谷歌地图：一个中心或边界属性是必需的”。

app.controller('mapCtrl', function($scope, uiGmapGoogleMapApi) { 
    $scope.map = {center: { latitude: 45, longitude: -73 }, zoom: 8 }; 
});

一个可行的plunkr - here - provide a API KEY

来源

2016-10-23 11:43:50 Mahesh

谷歌地图不加载 - Angular JS

回答

相关问题