Question

我正在使用Ionic-Cordova-Angular处理地图应用，我正在尝试使用Leaflet。我的问题是我无法获取Leaflet地图以自动填充整个视口。

我在使用直接JS时找到了解决方案。您可以使用CSS将HTML和Body设置为100％的高度，然后将map 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的高度更改为固定值（例如400像素），则会显示地图。

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

Answer 1

如果您使用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>

请注意，这使用了传单角度模块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    
}

顺便说一句，我个人觉得编写自己的指令来处理谷歌地图比较容易，因为他们的API非常好用且易于使用，然后我不会从更多第三方的东西中得到额外的膨胀我我没有使用，这种方式也没有人责怪我，但是。）。

在Ionic-Cordova-Angular应用程序的单张全屏

2 个答案: