单张地图未涵盖整个地图区域

Question

更新：我已经回答了。请看

原始问题：

您能告诉我为什么leaflet map没有显示在整个地图区域吗？

.html

<ion-content padding>
  <div style="height: 100%;width:100%" leaflet [leafletOptions]="options" *ngIf="options" [leafletCenter]="center">
  </div>
</ion-content>

.ts

  init(): void {
    this.options = {
      layers: [
        tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { maxZoom: 18, attribution: "..." })
      ],
      zoom: 10,
      center: this.center = latLng(Number(this.activatedRoute.snapshot.paramMap.get("latitude")), Number(this.activatedRoute.snapshot.paramMap.get("longitude"))),
      attributionControl: false,
    };
  }

UI

请查看图片。 transform似乎有问题。默认值为0,0,0。我已经在浏览器上手动更改过它，就像这样。那么如何将其设置为地图？

Answer 1

我在ionic 4项目中遇到了同样的问题。就像在link中的注释中所建议的那样，我在绘制地图时以及添加/删除标记或与此相关的任何其他操作时都需要使用 @media (max-width: 1024px) and (min-width: 981px) { .header-right-panel { width: 80%; float: right; } } 。这并没有完全帮助。之后，我还必须手动触发更改检测。这是我们的代码示例：

map.invalidateSize()

其中this.map.setView([this.myLocation.latitude, this.myLocation.longitude], 13); this.map.invalidateSize(); this.ref.detectChanges(); 指ref。

还要确保在ChangeDetectorRef文件中导入了传单css：

angular.json

Answer 2

我认为该传单的父母空间中有100％填充，您是否可以使用浏览器检查工具查看父母的宽度和高度。您也可以尝试使用

position：绝对；左：0；

忽略父母的宽度

Answer 3

尝试删除填充并将高度更改为100vh

尝试一下：

<ion-content>
  <div style="height: 100vh; width:100%" leaflet [leafletOptions]="options" *ngIf="options" [leafletCenter]="center">
  </div>
</ion-content>

如果要设置转换，请按照以下步骤操作：

<ion-content padding>
  <div style="height: 100%; width:100%; transform: translate3D(250px, 200px, 100px)" leaflet [leafletOptions]="options" *ngIf="options" [leafletCenter]="center">
  </div>
</ion-content>

Answer 4

在这里，我正在Ionic 4应用中使用它。我尝试了不同开发人员提供的许多解决方案。但是他们都没有为我工作。这里的问题是我先前使用的life cycle事件。所以现在我使用ionViewDidEnter()并没有问题。

ionViewDidEnter() {
    this.center = latLng(Number(this.activatedRoute.snapshot.paramMap.get("latitude")), Number(this.activatedRoute.snapshot.paramMap.get("longitude")));
    this.options = {
      layers: [
        tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { maxZoom: 18, attribution: "..." })
      ],
      zoom: 17,
      center: this.center,
      attributionControl: false,
    };

    this.layers.push(this.mapService.getMarker(this.center, "assets/icon/map/placeholder.png"));

  }

Answer 5

即使导入了leaflet.css和“ invalidateSize（）”技巧，我也遇到了同样的问题。

那是因为我在“ myComponent.page.html”中写道：

<ion-content>
  <div id="map" style="height:400px; width: 100%;"></div>
</ion-content>

似乎Ionic4 css与传单冲突。 您需要在{strong> <div>之外获得<ion-content>。

正确的只是：

<div id="map" style="height:400px; width: 100%;"></div>

希望这对某人有帮助

Answer 6

ma​​p.invalidateSize() 在调整窗口大小事件后运行。

所以高度改变后，只需编写代码：

 window.dispatchEvent(new Event('resize'));
 this.map.invalidateSize();

就我而言，它就像一种魅力。 不要忘记将 ma​​p 替换为您的地图变量。 我的它可以帮助某人