Ionic 如何在单击按钮后动态调整传单Map的大小？

i2byvkas 于 2022-12-09 发布在 Ionic

关注(0)|答案(3)|浏览(158)

我有一张包含在<div id="map" data-tap-disabled="false" style="width: 100%; height: 100%;"></div>中的传单Map
此页面分为<ion-header>、<ion-content>和<ion-footer>。Map包含在<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">

所发生的情况是，Map不会调整大小，而是保留为白色条带而不是页脚

我尝试使用invalidateSize传单方法，即使使用“setInterval”，但没有成功。我认为有一些关于html和css的编辑，但我还不是一个Maven。
再次，真的感谢大家提前，我希望我是清楚的：）

ionic-framework

来源：https://stackoverflow.com/questions/72546476/how-can-i-dynamically-resize-a-leaflet-map-after-clicking-a-button

3条答案

按热度按时间

gr8qqesn1#

我会根据你的代码加上我的分数

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）还是u只是共享了函数的一部分...

赞(0）回复(0）举报 2022-12-09

suzh9iv82#

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

在我的例子中，问题出在<ion-content>标记中自动创建的带有“scroll-content”类的<div>。因此，使用getElementsByClassName，我取数组中的第二个元素，并调整页眉和页脚的顶部边距和底部边距。
当然，这种解决办法不会是最佳的，会有更好的办法。

赞(0）回复(0）举报 2022-12-09

kuarbcqp3#

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

赞(0）回复(0）举报 2022-12-09

我来回答

Ionic 如何在单击按钮后动态调整传单Map的大小？

3条答案

相关问题

热门标签

最新问答