Angular Google 地图 运行 Cordova/Phonegap 问题

Question

我正在使用以下技术进行项目：phonegap (v 4.1.2)、angular (v 1.3.0) 和 onsen ui (v1.2.1)。

我真的很难在上面包含 Angular Google 地图。我真的迷路了，因为我没有收到任何要遵循的日志。

我要写下我所遵循的步骤，希望有人能注意到错误在哪里。

首先，我总是喜欢从一个简单的例子开始，所以我决定创建一个示例项目。我用过这个：

http://angular-ui.github.io/angular-google-maps/#!/use

我创建了我的 phonegap 项目结构，按照说明操作，瞧，地图显示正确。

然后，是时候将代码包含在项目中了。它包含以下元素（我会写出我认为对问题很重要的元素，如果需要更多信息uired，我稍后会添加）

文件：index.html

<script src="components/onsen/js/angular/angular.js"></script>    
<script src="lib/onsen/js/onsenui.js"></script>  
<script src="components/lodash/lodash.js"></script>
<script src="components/angular-google-maps/angular-google-maps.js"></script>
<script src="cordova.js"></script>

<!--modules-->
<script src="app.js"></script>

<!--controllers-->
<script src="controllers/updateCtrl.js"></script>
<script src="controllers/geoCtrl.js"></script>

文件：geolocalizacion.html

<ons-page on-device-backbutton="menu.setMainPage('main.html', {closeMenu: true});">
  <ons-toolbar>
    <div class="left">
      <ons-toolbar-button ng-click="menu.toggle()">
        <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
      </ons-toolbar-button>
    </div>

      <div class="center">Geolocalizaci&oacute;n</div>
  </ons-toolbar>

  <div id="map_canvas" ng-controller="GeoCtrl">
    <ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>
  </div

</ons-page>

文件：app.js

//App module
angular.module('app', ['onsen', 'angularLocalStorage', 'ngSanitize', 'uiGmapgoogle-maps']);

//Configs

//Google Maps SDK
angular.module('app').config(function(uiGmapGoogleMapApiProvider) {
    uiGmapGoogleMapApiProvider.configure({
        key: 'xxx',
        v: '3.17',
        libraries: 'weather,geometry,visualization'
    });
});

文件 geoCtrl:

angular.module('app').controller('GeoCtrl', function($scope, uiGmapGoogleMapApi, uiGmapLogger){
    console.log('Loading geoCtrl');
    uiGmapGoogleMapApi.then(function(maps) {
        $scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
        console.log('map: ', maps);
    });
});

好像都是对的，没有显示日志。我对示例应用程序和项目使用了相同的 api 密钥，但我认为这是允许的。日志 'Loading geoCtrl' 出现，'map:' 出现空白，但示例应用程序中出现同样的情况，但即使地图出现。

知道我可以测试什么，有什么问题或任何小提示。我是 angular 开发的新手，我认为这很重要。

提前感谢大家抽出时间。

此致， 内斯托

Answer 1

我终于知道是怎么回事了。贴出的代码没有问题。错误是我的，我缺少一些 css 代码来显示地图。

css:

.angular-google-map-container { height: 400px; }