Google maps 离子框架下的谷歌地图API

我正试图在爱奥尼亚列表卡中实现谷歌地图。据我所知，根据卡片的内容，卡片具有动态大小。当我把我的谷歌地图放在列表卡里面，给出100%的高度时，它不会显示出来。但是如果我给它一个像素大小，它看起来很好

我的地图html：

<ion-view view-title="Map">
<ion-content class="padding">
    <div class="list card">

        <div class="item item-avatar">
            <img src="img/{{siteInfo.capitalName}}.png">
            <h2>{{Map.siteInfo.fullName}}</h2>
            <p>{{Map.siteInfo.fisicalDirection}}</p>
        </div>
        <div id="map"></div>
        <a class="item item-icon-left assertive" ng-click="Map.getDirections(pin)">
            <i class="icon ion-ios-location-outline"></i> Directions
        </a>
    </div>
</ion-content>

{{Map.siteInfo.fullName}
{{Map.siteInfo.fisicalDirection}

方向

和#map{height:100%}的CSS

编辑：

---

如何使地图显示在列表卡中，而不必为地图div指定像素高度。因此，当在不同的设备上运行时，它可以是动态的。

很好，但实际的问题是什么？您想要实现什么？我想，它想了解为什么地图在使用像素（px）时可见，而在使用百分比（%）时不显示。我编辑以反映我的问题@Franky我认为它不适用于%，因为列表卡根据内容也有动态高度。这是一个常见的混合移动应用程序问题。GoogleMapsV3API无法在没有实际大小的容器中工作。100%将仅在母容器具有实际高度的情况下工作，但整个离子结构是灵活的。我会给你写一个工作示例。很好，但实际问题是什么？你想实现什么？我想，它想了解为什么地图在使用像素（px）时可见，而在使用百分比（%）时不显示。我编辑以反映我的问题@Franky我认为它不适用于%，因为列表卡根据内容也有动态高度。这是一个常见的混合移动应用程序问题。GoogleMapsV3API无法在没有实际大小的容器中工作。100%将仅在母容器具有实际高度的情况下工作，但整个离子结构是灵活的。我会给你写一个有效的例子。