带有 angular-google-maps 指令的离子答案

【问题标题】：Ionic with angular-google-maps directive带有 angular-google-maps 指令的离子
【发布时间】：2015-07-27 19:11:22
【问题描述】：

我一直在尝试让 angular-google-maps 启动并运行，但在我的一生中，我无法弄清楚它为什么不起作用...

首先我安装

cordova plugin add cordova-plugin-geolocation

这里是索引html

<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->

<!-- google maps javascript -->
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
<script src="lib/lodash/dist/lodash.min.js"></script>
<script src="lib/angular-google-maps/dist/angular-google-maps.min.js"></script>

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>

</head>

我的地图.html

<ion-view view-title="Map">
  <ion-content ng-controller="MapCtrl">
    <ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>
  </ion-content>
</ion-view>

最后是我的模块和控制器

var myApp = angular.module('myApp', ['ionic','uiGmapgoogle-maps']);

myApp.controller('MapCtrl', function($scope) {

   $scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };

});

当它运行时，在 chrome 浏览器和 android 手机上都会出现一个空白屏幕.. 任何想法我可能做错了什么？感谢观看

所以在将谷歌依赖项移动到 ionic.bundle 下面之后，地图现在会加载...但是我无法使用

将高度设置为 100%

.angular-google-map-container {
    height: 100%;
}

有什么想法吗？？

【问题讨论】：

好吧，原来我必须在 ionic 之后加载谷歌地图，所以我只是在 ionic.bundle 下插入了脚本，它仍然不知道如何将高度设置为 100% 而不是像素值。 ...以及如何添加行车路线...所以...

标签： angularjs google-maps ionic-framework

【解决方案1】：

试试这个。

 <map center="{{latitud}}, {{longitud}}" zoom="12" id="map_views" data-tap-disabled="true"></map>

【讨论】：

【解决方案2】：

<script src="lib/angular-google-maps/dist/angular-google-maps.min.js"></script>

应在ionic 之后加载，因为离子束包含角度框架

【讨论】：

人们是否知道他们为什么这样做？关于 ANGULARJS 和加载 Angular Lib，我的回答是 100% 准确的。