Блог

Я пытаюсь создать приложение с помощью Google Map, однако, похоже, я что-то упускаю.

Вот мой код:

 <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}} .

Я потерял целый день, пытаясь разобраться в этом.. вероятно, это что-то «маленькое», что я пропустил. Пожалуйста, обратите внимание, что под ‘key’ находится законный ключ API.

Пожалуйста, помогите, спасибо.

Вам также необходимо объявить зависимость от 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">
		<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>  

Поместите $scope.map за пределы promise в controller. При текущей настройке вы должны получить ошибку — «angular-google-maps: требуется свойство center или bounds».

---

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

Plunkr, который работает — здесь — предоставляет КЛЮЧ API