Angular Google Maps 未在 Ionic 中显示答案

【问题标题】：Angular Google Maps not displaying in IonicAngular Google Maps 未在 Ionic 中显示
【发布时间】：2016-03-22 00:45:56
【问题描述】：

我正在使用Angular Google Maps 在我的Ionic 应用程序中实现地图和地理位置。我根据文档做所有事情，但地图没有显示（即使没有任何控制台输出显示错误）。

控制器：

app.controller('panicController', ['$scope', '$cordovaGeolocation',
  function($scope, $cordovaGeolocation) {

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

  }
]);

查看：

<ion-view hide-nav-bar="true" ng-controller="panicController" class="panic-view">

  <ion-content data-tap-disabled="true" class="padding">

    <ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>

  </ion-content>

</ion-view>

SCSS：

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

当我运行它时，我只是得到一个空白/空的白色视图。还有我的控制台输出：

知道问题可能是什么吗？

【问题讨论】：

您可以尝试同时提供一个宽度属性吗？同样在文档中它有 400px 的高度。也许 100% 高度不起作用。

标签： angularjs google-maps ionic-framework ionic angular-ui

【解决方案1】：

也许这个例子可以帮助你。_ nightly codepen

我也在我的应用程序中使用了这个例子，我喜欢这种方式。

你需要这样开发吗？

问候，

伯恩哈德

【讨论】：

【解决方案2】：

尝试删除传感器参数。但根据文档，它不应该影响 API 的行为。看起来还有其他事情正在向您显示白色视图。

来自 Google Maps API 文档：https://developers.google.com/maps/documentation/javascript/error-messages

SensorNotRequired：传感器参数不再需要谷歌地图 JavaScript API。它不会阻止谷歌地图 JavaScript API 无法正常工作，但我们建议您从脚本元素中删除传感器参数。

【讨论】：

【解决方案3】：

在我的情况下，解决方案是explicitly 通过module 指定对uiGmapgoogle-maps 的依赖关系，因此请确保包含uiGmapgoogle-mapsmodule：

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

Demo

【讨论】：