Ionic-Cordova-Angular 应用程序中的传单全屏

Question

我正在使用 Ionic-Cordova-Angular 开发地图应用程序，并尝试使用 Leaflet。我的问题是我无法让 Leaflet 地图自动填充整个视口。

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

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

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 的高度更改为固定值（例如 400px），地图将显示出来。

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

Answer 1

如果您使用 ionic 的内容和视图类，则无需将每个 div 设置为 100%。

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

<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

Answer 2

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

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 非常好且易于使用，而且我不会从更多第三方的东西中得到额外的膨胀'不使用，这样也没有人可以责怪，但我:)。