Ionic-Cordova-Angular應用程序中的全屏幕小冊子

我正在使用Ionic-Cordova-Angular繪圖應用程序，並且正在嘗試使用Leaflet。我的問題是，我無法讓Leaflet貼圖自動填充整個視口。Ionic-Cordova-Angular應用程序中的全屏幕小冊子

我發現使用直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），則會顯示地圖。

我知道角度傳單指令，目前我也在探索該選項，但在我看來，這確實不應該那麼困難。我錯過了一些簡單的東西嗎謝謝您的幫助！

來源

2015-04-17 dgboss

這不是角度本身或傳單的問題，只是瞭解盒子模型的工作原理。

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是相當不錯的，並容易工作，然後我不會從更多的第三方的東西，我沒有使用額外的膨脹，這種方式沒有人責怪，但我:)。

來源

2015-04-17 19:52:22 shaunhusain

感謝您的快速回答shaunhusain！我只是用html，JS，Angular等等（來自公司的.NET背景）弄溼我的腳。有一個陡峭的學習曲線。由於我使用的是Ionic，因此我的地圖div嵌套6或7個標籤深度：body> ion-nav-view> ion-view> ion-pane> ion-content> div>我的地圖div。將這些元素的高度設置爲100％非常好用！不知道我是否按照正確的方式進行，但現在至少它正在爲我工作。 – dgboss

@dgboss是沒問題，我來自一個Flex/Java背景，所以我知道這種感覺，是一種水外的魚。盒子模型是我認爲在瀏覽器中工作的最糟糕的事情之一，我曾經非常討厭JS，但在使用它一段時間並學習Angular之後，我對該部分非常滿意。一旦在瀏覽器中設置了用於確定事物大小的css flex模型，就會讓事情變得更好，但現在我們只需要處理。 – shaunhusain

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

來源

2015-04-17 21:47:22

它仍然不起作用。你能否也展示一個簡單的控制器？ –

Ionic-Cordova-Angular應用程序中的全屏幕小冊子

回答

相關問題