问传单图和离子4

EN

1. npm安装单张--储蓄
2. 在angular.json或应用程序的任何类似配置文档中，添加以下内容： a) “资产”：.，{ "glob"："**/*"，“输入”：“./节点_模块/传单/dist/映像”，“输出”：“传单/”}， b) “样式”：.，“./node_modules/传单/dist/传单.dist”，
3. 在您的component.html中：
4. 在您的component.ts中： 从‘传单’中导入{ Map，latLng，tileLayer，Layer，marker }；
5. 然后，在加载DOM时，可以调用这样的函数： loadmap() { setTimeout(() ) => { this.map =新地图( 'Map‘).setView(this.lat，this.lng，8)；tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'，{ // tslint:禁用-下一行属性：’地图数据( OpenStreetMap )贡献者，CC-BY-SA，图像(Mapbox)，maxZoom: 18 }.addTo(this.map)；}，50；}

注意，this.lat、this.lng是我自己的值。

对于其他任何东西，都有docs：https://leafletjs.com/reference-versions.html

编辑：

我使用的不是setTimeout，而是Ionic的ionViewDidEnter()。SetTimeout是一种变通方法，因为Angular的ngAfterViewInit()不适合我。

@alex351 351的回答非常好。但我来到这个帖子从谷歌寻找"ionic4传单破碎地图“。

即使导入了leaflet.css，我也没有显示瓦片。

是因为我写了

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

似乎Ionic4的css与传单有冲突。您需要把<div> 放在 <ion-content>之外。

正确之处在于：

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

希望这能帮到别人