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

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

在我看来，传单的 parents space 是 100% 填充的，您可以使用浏览器检查工具查看 parents 的宽度和高度吗？您也可以尝试使用

位置：绝对；左：0；

忽略parents宽度

Answer 2

尝试移除填充并将高度更改为 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 3

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

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"
]

Answer 4

这里我将它与 Ionic 4 应用程序一起使用。我尝试了不同开发人员提供的许多解决方案。但是 none 其中对我有用。这里的问题是我之前使用的 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 似乎与传单冲突。您需要在 <ion-content>.

之外获取 <div>
正确的是：

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

希望这对某人有所帮助

Answer 6

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

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

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

对我来说，它就像一个魅力。不要忘记将 map 替换为您的地图变量。我的它帮助了某人

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

Leaflet map doesn't cover whole map area

maps

leaflet

typescript

angular

ionic4