Google Map не загружается - Angular JS

Я пытаюсь сделать приложение с Google Map, однако кажется, что я что-то упускаю.Google Map не загружается - 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 за пределы обещания в контроллере. При текущей настройке вы должны получить eror - «угловые-google-карты: требуется свойство центра или границ».

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

Google Map не загружается - Angular JS

ответ

Смежные вопросы