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

Question

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

我在直接使用 JS 时找到了解决方案。您可以使用 CSS 将 HTML 和主体设置为 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），地图将显示。

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

Answer 1

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

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

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

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

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

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

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

Leaflet full screen in Ionic-Cordova-Angular app

angularjs

leaflet