传单地图未覆盖整个地图区域答案

【问题标题】：Leaflet map doesn't cover whole map area传单地图未覆盖整个地图区域
【发布时间】：2019-04-10 16:11:45
【问题描述】：

更新：我已经给出了答案。请看。

原问题：

你能告诉我为什么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,
    };
  }

用户界面

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

【问题讨论】：

很可能是stackoverflow.com/questions/36246815/…
@ghybs 请查看我的更新并给我建议。
Data-toggle tab does not download Leaflet map的可能重复
@IvanSanchez 没用。这对我有用：stackoverflow.com/a/55622789/1077309

标签： angular typescript leaflet maps ionic4

【解决方案1】：

我在 ionic 4 项目中遇到了同样的问题。就像在link 的评论中建议的那样，我在渲染地图时需要使用map.invalidateSize()，以及在添加/删除标记或任何其他相关操作时。这并没有完全帮助。之后我还必须手动触发变更检测。这是我们代码中的一个示例：

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

其中ref 指的是ChangeDetectorRef。

还要确保在 angular.json 文件中导入了传单 css：

"styles": [
  // ....
  "./node_modules/leaflet/dist/leaflet.css"
]

【讨论】：

【解决方案2】：

在我看来，传单在其父空间中已 100% 填充，您可以使用浏览器检查工具查看父空间的宽度和高度是多少。您也可以尝试使用

位置：绝对；左：0；

忽略父母的宽度

【讨论】：

【解决方案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>

【讨论】：

【解决方案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"));

  }

【讨论】：

确切地说，您在这里所做的是通过稍后分配您的options 成员来延迟地图初始化，该成员使用模板中的leaflet 指令来管理地图容器的*ngIf。如果您在此生命周期挂钩中使地图大小无效，结果应该是相同的。
@ghybs 我已经做到了。但这对我不起作用。也许我做错了。

【解决方案5】：

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

因为我在“myComponent.page.html”中写了：

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

Ionic4 css 似乎与传单冲突。你需要得到<div> outside of <ion-content>。

正确就是：

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

希望这对某人有所帮助

【讨论】：

【解决方案6】：

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

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

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

在我的情况下，它就像一个魅力。不要忘记将 map 替换为您的地图变量。我的它可以帮助某人

【讨论】：