如何在点击按钮后动态调整传单地图的大小？

Question

我有一份传单地图包含在

<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 的内容需要编辑，但我还不是专家。

再次感谢大家，我希望我说清楚了:)

Answer 1

根据您的代码，我将添加我的积分；

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 代码，因为（自己）不太清楚它是像（这个）还是您只是共享部分功能...

Answer 2

最后我找到了一个适合我的解决方案。我会把它发布在这里。我要感谢@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";
  }
})

在我的例子中，问题是带有“scroll-content”类的

<div>

，该类是在

<ion-content>

标签内自动创建的。因此，使用

getElementsByClassName

，我获取了数组中的第二个元素，并调整了页眉和页脚的上边距和下边距。

这个解决方案肯定不是最优的，会有更好的方法。

Answer 3

CSS

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

HTML

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

• 添加

  display: flex

  并设置

  height

  和

  width