首页 文章

离子 Map - 在视图的一小部分内拟合 Map

提问于
浏览
1

我创建了一个非常简单的Ionic Maps应用程序(使用this template),它在浏览器和我的设备上都运行良好 . 如您所知,默认 Map 模板会生成一个类似于以下内容的应用:

enter image description here

我试图将它改为 make the map fit a small part of the view (在右上角) .

我希望它看起来像这样:

enter image description here

我认为这可以通过简单的CSS(摆弄 Map 元素的宽度和高度)来完成,所以我去了style.css并尝试更改它 .

但是, if I change it to something other than 100% ,如果我将"display"改为"block", the map simply disappears 以外的其他内容 .

我尝试了什么:

  • Changing the width/height/display of the map element . 如果我这样做, Map 就会消失,或者出现在其他元素的前面(主视图的文本和按钮);

  • Fitting it inside the ionic grid's "col" div . 不起作用;

  • Fitting the other content inside the Ionic grid . 它不起作用 - Map 总是显示在其他元素的前面 .

EDIT: What worked:

  • 我不得不删除指令的包装器 . 我相信这一点,除其他外,阻止了我内部的项目以我在这里描述的方式处理 .

非常感谢Prashant的时间和建议 .

1 回答

  • 2

    我试着玩离子启动器 Map 项目,这对我有用:

    Update: (Exactly what you want)

    <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>
    

    Result:

    Small Map for ionic

相关问题