Question

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

我真的很难在其上加入Angular Google Maps。我真的迷路了，因为我没有收到任何记录。

我将写下我所遵循的步骤，以便有希望任何人注意到哪里是错误。

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

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

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

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

文件：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密钥，但我认为这是允许的。日志'加载geoCtrl'出现，并且'map：'显示为空白，但样本应用程序中也出现相同的情况，但即使地图出现也是如此。

任何想法我可以测试什么，什么是错误或任何一点提示。我对角度发展很新，我认为这是重要的。

先谢谢你们的时间。

此致内斯托尔

Answer 1

最后我发现了发生了什么。发布的代码没有问题。错误是我的，我错过了一些用于显示地图的CSS代码。

的CSS：

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

在Cordova / Phonegap问题中运行的Angular Google Maps

1 个答案: