使用离子框架配置 angular-google-maps答案

【问题标题】：config angular-google-maps with ionic-framework使用离子框架配置 angular-google-maps
【发布时间】：2016-01-11 21:02:19
【问题描述】：

我已经为工作启动了一个 ionic 应用程序，跨平台 arm 的功能之一是集成了一个谷歌地图 api。目前我选择angular-google-maps

现在我尝试像这样使用离子配置它：

似乎一切都很好，但为什么它不起作用？

<html ng-app="appMaps">
  <head>
    <meta charset="utf-8">
    <title>Map</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    <script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
    <script src="https://raw.github.com/lodash/lodash/3.10.1/lodash.min.js"></script>
    <script src="https://raw.github.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.min.js"></script>

  </head>
  <body>
    <ion-header-bar class="bar-dark" >
      <h1 class="title">Google Maps Example</h1>
    </ion-header-bar>
    <ion-content>
      <div id="map_canvas" ng-controller="mainCtrl">
         <ui-gmap-google-map center="map.center" zoom="map.zoom" options="options"></ui-gmap-google-map>
      </div>
    </ion-content>

    <SCRIPT>
    angular.module('appMaps', ['uiGmapgoogle-maps','ionic'])
    .controller('mainCtrl', function($scope) {
        $scope.map = {center: {latitude: 51.219053, longitude: 4.404418 }, zoom: 14 };
        $scope.options = {scrollwheel: false};
    });
    </SCRIPT>
  </body>
</html>

【问题讨论】：

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

【解决方案1】：

你错过了一些东西：

angular-simple-logger.js 的链接（angular-google-maps 有依赖关系）
angular-google-map-container 的 CSS 高度（参见 http://angular-ui.github.io/angular-google-maps/#!/use 项目符号 7）
在直接链接到 GitHub 上的 JS 库时将 raw.github.com 转换为 rawgit.com。

这里是工作的 sn-p：

<html ng-app="appMaps">

<head>
  <meta charset="utf-8">
  <title>Map</title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  <script src="//rawgit.com/lodash/lodash/3.10.1/lodash.min.js"></script>
  <script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
  <script src="//rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.js"></script>
  <script src="//rawgit.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.min.js"></script>
  <style>
  #map_canvas {
  width: 100%;
  height: 100%;
}

.angular-google-map-container { height: 400px; }
    
  </style>
</head>

<body>
  <ion-header-bar class="bar-dark">
    <h1 class="title">Google Maps Example</h1>
  </ion-header-bar>
  <ion-content>
    <div id="map_canvas" ng-controller="mainCtrl">
      <ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options"></ui-gmap-google-map>
    </div>
  </ion-content>

  <SCRIPT>
    angular.module('appMaps', ['uiGmapgoogle-maps', 'ionic'])
      .controller('mainCtrl', function($scope) {
        $scope.map = {
          center: {
            latitude: 51.219053,
            longitude: 4.404418
          },
          zoom: 14,
          options: {
            scrollwheel: false
          }
        };
      });
  </SCRIPT>
</body>

</html>

【讨论】：