我想學習角度,並使用Angular-Google-Maps與Angular Seed。
我只是想讓地圖顯示出來,但我不認爲它正在接收緯度,經度和縮放參數,因此沒有任何內容。我沒有在Chrome中的Web開發人員檢查員中顯示任何錯誤。
我相信這個問題是在添加此
$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
爲了我喜歡的範圍的角度,谷歌,地圖文件的讀取。
如果我跳過上述說明並在我的index.html文件中執行此操作,它將起作用。
<ui-gmap-google-map center='{ latitude: 45, longitude: -73 }' zoom='zoom: 8'></ui-gmap-google-map>
這是我app.js文件:
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'myApp.view1',
'myApp.view2',
'myApp.view3',
'myApp.version',
'uiGmapgoogle-maps'
])
.controller('mapCtrl', function($scope, uiGmapGoogleMapApi){
$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
})
.config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
這是我的index.html文件:
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Project R</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="app.css">
</head>
<body>
<ui-gmap-google-map id="map-container" center='map.center' zoom='map.zoom'></ui-gmap-google-map>
<ul class="menu">
<li><a href="#/view1">Add Memory</a></li>
<li><a href="#/view2">Profile</a></li>
<li><a href="#/view3">Search</a></li>
</ul>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="view3/view3.js"></script>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
<script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
<script src='bower_components/lodash/dist/lodash.min.js'></script>
<script src='bower_components/angular-google-maps/dist/angular-google-maps.min.js'></script>
</body>
</html>
我app.css文件包括這些款式:
#map-container{
height:400px;
width:100%;
position: absolute;
z-index: -1;
left:0;
top:0;
}
.ng-isolate-scope{
height:400px;
width:100%;
}
.angular-google-map{
height:400px;
width:100%;
}
.angular-google-map-container{
position: absolute;
height:400px;
width:100%;
}
這就是問題......這讓它工作。但是,在文檔中他們並不要求div包含ui-gmap-google-map標籤。我不知道如何根據他們在這裏的文檔工作:http://angular-ui.github.io/angular-google-maps/#!/use – Livi17
我相信發生的是通過提供值直接在HTML中,您將不再需要控制器,因此當您對其進行硬編碼時,它可以工作。當你使用'map.center'這樣的綁定從控制器中引入這些值時,這就是問題出現的地方,因爲你顯然需要這個控制器。 – MattDionis
這是真的,我假設和文檔可能假定您在路由定義中定義了控制器,因爲這通常是執行此操作的最佳位置。老實說,仍然不會使用這個指令作爲學習角度的出發點,文檔中存在明確的缺陷,而且對於大多數人的需求來說,它過於複雜。 – shaunhusain