ionic3 - 传单没有加载瓷砖

Question

我正在尝试在我的 ionic 应用程序上显示传单地图，但除了我创建的标记外，它不显示任何内容！
如您所见，没有对传单或 mapbox 服务器的请求（我使用 mapbox）

这是我的代码：

import { Component } from "@angular/core";
import leaflet from "leaflet";

@Component({
    templateUrl: "test-map.html"
})
export class TestMap {
    leafletMap: any;

    constructor() {}

    ionViewDidLoad() {
        this.leafletMap = leaflet.map("leafletmap", {
            center: [28.618072, 51.538088],
            zoom: 18,
            maxZoom: 18
        });

        this.openMap();
    }

    openMap() {
        setTimeout(() => {
            this.leafletMap.invalidateSize();
        }, 0);

        leaflet.tileLayer(
            "https://api.tiles.mapbox.com/v4/{id}" +
                "/{z}/{x}/{y}.png?access_token={my-access-token}",
            {
                attribution: "",
                maxZoom: 18,
                id: "mapbox.streets",
                accessToken: "{my-access-token}"
            }
        );

        this.leafletMap.setView(leaflet.latLng(28.618072, 51.538088));

        leaflet.marker([28.618072, 51.538088]).addTo(this.leafletMap);
    }
}

如您所见，我已经尝试过invalidateSize！

我该如何解决这个问题？

标签： ionic3leaflet

Answer 1

正如@IvanSanchez 在评论中提到的那样，我应该添加tileLayer到map：

leaflet.tileLayer(
            "https://api.tiles.mapbox.com/v4/{id}" +
                "/{z}/{x}/{y}.png?access_token={my-access-token}",
            {
                attribution: "",
                maxZoom: 18,
                id: "mapbox.streets",
                accessToken: "{my-access-token}"
            }
        ).addTo(this.leafletMap);