單擊按鈕后如何動態調整傳單地圖的大小？

我有一張傳單地圖包含在<div id="map" data-tap-disabled="false" style="width: 100%; height: 100%;"></div>

此頁面分為<ion-header>、<ion-content>和<ion-footer>。地圖包含在<ion-content>. 我想做的是用按鈕隱藏頁眉和頁腳。

所以我用L.easyButton. 代碼如下：

L.easyButton('click',function(){
    if(self.hideLayout){
      self.map.addControl(setLayers);
      self.map.addControl(setZoom);
      self.map.addControl(toolBar);
      self.map.addControl(setScale);
      self.enableAdditionalButtons(textButton, arrowButton);
      self.hideLayout = false;
      self.hideFooter = false;
      self.map.invalidateSize(true);
    }else{
      self.map.removeControl(toolBar);
      self.map.removeControl(setLayers);
      self.map.removeControl(setZoom);
      self.map.removeControl(setScale);
      self.disableAdditionalButtons(textButton, arrowButton);
      self.hideLayout = true;
      self.hideFooter = true;
      self.map.invalidateSize(true);
    }

我將以下代碼添加到<ion-footer>：

<ion-footer *ngIf="!this.mapService.hideFooter">

發生的情況是地圖沒有調整大小并且仍然是白色帶而不是頁腳

我嘗試使用 invalidateSize 傳單方法，即使使用“setInterval”但沒有成功。我認為有一些關于 html 和 css 的編輯，但我還不是專家。

再次，真的提前感謝大家，我希望我很清楚:)

uj5u.com熱心網友回復：

根據您的代碼，我將添加我的觀點；

constructor(private plt: Platform) {
    
}

L.easyButton('click', () => {
    const map = document.getElementById('map');
    if (self.hideLayout) {
      self.map.addControl(setLayers);
      self.map.addControl(setZoom);
      self.map.addControl(toolBar);
      self.map.addControl(setScale);
      self.enableAdditionalButtons(textButton, arrowButton);
      self.hideLayout = false;
      self.hideFooter = false;
      self.map.invalidateSize(true);
      map.style.height = '100%';
      map.style.width = '100%';
    } else {
      self.map.removeControl(toolBar);
      self.map.removeControl(setLayers);
      self.map.removeControl(setZoom);
      self.map.removeControl(setScale);
      self.disableAdditionalButtons(textButton, arrowButton);
      self.hideLayout = true;
      self.hideFooter = true;
      self.map.invalidateSize(true);
      map.style.height = (this.plt.height() - 26)   'px';
      // 26 is the status bar, it may be 20 so u update it accordingly
      // source: https://ionicframework.com/docs/v3/theming/overriding-ionic-variables/
      map.style.width = this.plt.width()   'px';
    }

如果它不起作用，那么你需要提供你的 ts 代碼，因為 (self) 不是很清楚，如果它是 (this) 或者你只是共享了函式的一部分......

uj5u.com熱心網友回復：

最后我找到了一個適合我的解決方案。我會把它貼在這里。我要感謝@Mostafa Harb 對我的幫助。

L.easyButton('click', function() {
  const footerAndHeader = Array.from(document.getElementsByClassName('scroll-content') as HTMLCollectionOf<HTMLElement>)[1];

  if (self.hideLayout) {
    self.map.addControl(setLayers);
    self.map.addControl(setZoom);
    self.map.addControl(toolBar);
    self.map.addControl(setScale);
    self.enableAdditionalButtons(textButton, arrowButton);
    self.hideLayout = false;
    self.hideFooter = false;
    self.hideHeader = false;
    self.map.invalidateSize(true);

    footerAndHeader.style.marginBottom = "40px";
    footerAndHeader.style.marginTop = "54px";
  } else {
    self.hideLayout = true;
    self.hideFooter = true;
    self.hideHeader = true;
    self.map.removeControl(toolBar);
    self.map.removeControl(setLayers);
    self.map.removeControl(setZoom);
    self.map.removeControl(setScale);
    self.disableAdditionalButtons(textButton, arrowButton);
    self.map.invalidateSize(true);

    footerAndHeader.style.marginBottom = "7px";
    footerAndHeader.style.marginTop = "3px";
  }
})

在我的情況下，問題是在標簽<div>內自動創建的“滾動內容”類。<ion-content>因此，使用getElementsByClassName，我獲取了陣列中的第二個元素，并調整了頁眉和頁腳的上邊距和下邊距。

當然，這個解決方案不會是最優的，并且會有更好的方法。

uj5u.com熱心網友回復：

CSS

.mymap{
    display: flex;
    width: 100%;
    heightL 100%;
}

HTML

<div id="map" data-tap-disabled="false" class="mymap">
    // your code
</div>

• 添加display:flex和設定height和width

標籤：html css 离子框架 传单 离子3

上一篇：從第二頁向前導航到第三頁時頁面不會改變，第三頁是與第三頁具有相同url的第一頁AngularIonic

下一篇：用于移動應用程式的Laravelrestapi(santum)