离子框架如何在离子内容图下面放置一个div或按钮 [英] Ionic Framework How to place a div or buttons below ion-content map

查看:178
本文介绍了离子框架如何在离子内容图下面放置一个div或按钮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在开发离子项目,在标签中,我放置了一个google地图, this 教程。现在我想放一些按钮(在div里面)来触发该地图上的一些操作。怎么可以实现呢?

I'm working on an ionic project and in a tab I placed a google map following this tutorial. Now I want to put some buttons (inside a div?) to trigger some actions over that map. how can achieve that? I'm really newbie with this framework, I'll appreciate any help.

我的index.html

My index.html

<body>
    <ion-nav-bar class="bar-positive" animation="nav-title-slide-ios7">
        <ion-nav-back-button class="button-clear">
            <i class="ion-arrow-left-a"></i>
        </ion-nav-back-button>
        <ion-nav-buttons side="right">
            <a class="button" href="#/tab/twitter">
                <i class="icon ion-social-twitter"></i>
            </a>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view animation="slide-left-right-ios7">
    </ion-nav-view>
</body>

我的maps.html

My maps.html

<ion-view title="Ubicación">
    <ion-content id="maps" scroll="false" data-tap-disabled="true">
    </ion-content>
</ion-view>

推荐答案

为什么不将地图添加到单独的div

Why don't you add your map into a separate div

<ion-view title="Ubicación">
    <ion-content>
          <div id="maps" scroll="false" data-tap-disabled="true"></div>
          <div class="testHello "> My Button </div>
    </ion-content>
</ion-view>

并将您的商品放置在固定位置

And position your items on position fixed

.testHello { 
  position : absolute;
  background-color: red;
    width : 100%;
  bottom:0px;
}

查看更新的codepen
http://codepen.io/anon/pen/eNgRpR

See updated codepen http://codepen.io/anon/pen/eNgRpR

这篇关于离子框架如何在离子内容图下面放置一个div或按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆