Ionic-Cordova角应用程序的全屏幕传单

Question

我正在开发一个使用角的地图应用程序，并试图使用传单。我的问题是，我不能让传单地图自动填写整个视图。

我在直接使用JS时找到了解决方案。您可以使用CSS将HTML和Body设置为100%的高度，然后将映射div设置为100%。您可以在这个JSFiddle：https://jsfiddle.net/wzfLs10a/中看到这一点。

不幸的是，当我将角引入混合时，同样的解决方案不起作用。下面是一些示例代码：

Index.html

<div id="map" ng-app="demoapp" ng-controller="MainCtrl"></div>

App.js

angular.module("demoapp", ["controllers"]);

angular.module('controllers',[])

   .controller('MainCtrl',['$scope',
    function($scope) {
        $scope.map = L.map('map').setView([37.8, -96], 4);            
        L.tileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpeg', {
        attribution: 'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        subdomains: '1234'
    }).addTo($scope.map);

    }]);

Style.css

html, body { height: 100%; width: 100%;}
#map { height: 100%;}

这里有一个JSFiddle：https://jsfiddle.net/3sv374Lz/。请注意，如果将映射div的高度更改为固定值(例如400 to )，则地图将显示。

我知道有角度的传单指示，目前也在探索这一选择，但在我看来，这真的不应该是那么困难。我错过了一些简单的东西吗？谢谢你的帮助！

Answer 1

这不是角度本身或传单的问题，而是对盒子模型工作原理的理解。

https://jsfiddle.net/7k11k32m/

如果设置了某些百分比高度，则具有百分比的容器的父容器也必须具有设置的高度。由于您在这里引入了一个额外的div，而没有给它一个高度，那么地图就不会展开来填充屏幕。

更新您的CSS (在html上也有一个类型)：

html, body {
    height: 100%;
    width: 100%;
}
[ng-app]{
    height:100%;
}
#map {
    height: 100%;
    /* Change 100% to 400px and the map will display    
}

顺便说一句，我个人发现编写我自己的处理Google地图的指令更容易，因为它们的API非常好，而且很容易使用，然后我不会从更多我不使用的第三方东西中得到额外的膨胀，这样，除了我之外，没有人可以责怪我。)

Answer 2

如果使用离子型的内容和视图类，则不需要将每个div设置为100%。

我在我的离子型应用程序中使用传单，代码如下：

<ion-view title="Map">
    <ion-content scroll="false" data-tap-disabled="true">
        <leaflet height="100%" width="100%"></leaflet>
    </ion-content>
</ion-view>

请注意，这使用了传单角模块https://github.com/tombatossals/angular-leaflet-directive。