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

Question

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

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

我希望它看起来像这样：

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

然而，如果我将其更改为100％以外的其他内容，并且如果我将“显示”更改为“阻止”以外的其他内容，则地图会消失所有在一起。

我尝试了什么：

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

编辑：有效：

• 我必须删除该指令的包装。我相信这一点，除其他外，阻止了我内部的项目以我在此描述的方式处理。

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

Answer 1

我尝试过使用离子启动器地图项目，这对我有用：

更新:(完全是您想要的）

{{1}}

<强>结果：