vue+高德地图如何将按钮悬浮于地图层上

Question

使用了element ui以及vue-amap，部分代码如下

 <el-amap
      vid="amapDemo"
      :amap-manager="amapManager"
      :events="events"
      :zoom="zoom"
      :center="center"
      class="amap-demo"
      pitch-enable="false"
    >

      <div id='container'>
      <div class="input-card" style='width: 18rem;' >
        <div class="input-item">
          <input type="radio" name='func' value='rule'><span class="input-text" style="font-size: small">距离测量</span>
          <input type="radio" name='func' value='measureArea'><span class="input-text" style="font-size: small">面积测量</span>
          <el-button type="primary" id="close" class="btn" value="清除" size="mini">清除</el-button>
        </div>
      </div>
      </div>

效果如下

如何让地图下方的三个功能放在一个窗体内悬浮于地图切换插件下方，如下图蓝色位置

Answer 1

MapView也是一种控件，我们只要使用相对布局方式，就能将按钮添加到地图之上来显示。