Question

我正在尝试使用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密钥。

请帮助，谢谢。

Answer 1

将$ scope.map放在控制器中的promise之外。使用当前设置，你应该得到一个错误 - ＆＃34; angular-google-maps：需要一个中心或边界属性＆＃34;。

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

有效的傻瓜 - here - provide a API KEY

Answer 2

您还需要声明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>

谷歌地图未加载 - Angular JS

2 个答案: