谷歌地圖不加載 - 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

回答

相關問題