我有一份传单地图包含在
<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 的内容需要编辑,但我还不是专家。
再次感谢大家,我希望我说清楚了:)
根据您的代码,我将添加我的积分;
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 代码,因为(自己)不太清楚它是像(这个)还是您只是共享部分功能...
最后我找到了一个适合我的解决方案。我会把它发布在这里。我要感谢@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
,我获取了数组中的第二个元素,并调整了页眉和页脚的上边距和下边距。
这个解决方案肯定不是最优的,会有更好的方法。
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