Ionic Maps - 在视图的一小部分内拟合地图答案

【问题标题】：Ionic Maps - Fitting map inside a small part of the viewIonic Maps - 在视图的一小部分内拟合地图
【发布时间】：2016-11-01 09:42:45
【问题描述】：

我创建了一个非常简单的 Ionic Maps 应用程序（使用 this template），它在浏览器和我的设备上都运行良好。如您所知，默认地图模板生成的应用程序如下所示：

我有默认模板代码。但现在我正在尝试将其更改为使地图适合视图的一小部分（在右上角）。

我希望它看起来像这样：

我认为这可以用简单的 CSS 来完成（摆弄地图元素的宽度和高度），所以我去了 style.css 并尝试更改它。

但是，如果我将其更改为 100% 以外的其他内容，并且如果我将“显示”更改为“阻止”以外的其他内容，地图就会完全消失在一起。

我尝试了什么：

更改地图元素的宽度/高度/显示。如果我这样做，地图就会消失，或者出现在其他元素的前面（主视图的文本和按钮）；
将其放入离子网格的“col”div 中。不工作；
将其他内容放入 Ionic 网格中。它不起作用 - 地图始终显示在其他元素的前面。

编辑：什么有效：

我不得不移除指令的包装器。我相信，除其他外，这会阻止按照我在此处描述的方式处理内部项目。

非常感谢 Prashant 的宝贵时间和建议。

【问题讨论】：

标签： html css angularjs google-maps ionic-framework

【解决方案1】：

我尝试使用 ionic starter maps 项目，这对我有用：

更新：（正是你想要的）

<body ng-app="starter" ng-controller="MapCtrl">

  <ion-header-bar class="bar-stable">
    <h1 class="title">Map</h1>
  </ion-header-bar>

  <ion-content scroll="false">

    <div class="row">

      <div class="col col-50 col-center">
        <h3>Some heading</h3>
        <p>Some text</p>
      </div>

      <div class="col col-50">
        <div style="height: 150px; width: 100%;">
          <map on-create="mapCreated(map)"></map>
        </div>
      </div>

    </div>

    <div class="padding">
      <a href="#" class="button button-block button-calm">Some button</a>
      <a href="#" class="button button-block button-positive">Another button</a>
    </div>

  </ion-content>

  <ion-footer-bar class="bar-stable">
    <a ng-click="centerOnMe()" class="button button-icon icon ion-navigate"></a>
  </ion-footer-bar>

</body>

结果：

【讨论】：

我尝试避免浮动，因为我认为它会与网格冲突，但我想我别无选择。我会尽快测试它，如果适用于我的所有设备 - 我会按照你的方式进行。谢谢！
Float 只是为了证明它有效。我会在下一次编辑中放一个更好的版本。不用担心。
好的，我明白问题出在我身上了。我没有删除包装元素，我怀疑它会阻止地图按照我想要的方式处理。再次感谢 Prashant！
没问题。干杯! :)