Bonjour,

Ce code ci dessous me permet d'afficher une map avec des marqueurs en récupérant les datas via une API.

Sauf que, lorsque j'ouvre le navigateur la map apparaît bien mais pas les marqueurs. La console affiche :

Uncaught TypeError: Cannot read property 'map' of undefined
at Map.js:40
at Array.forEach (<anonymous>)
at Map.js:35
at XMLHttpRequest.<anonymous> (Map.js:20)


Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
/*------------------------------------------
MAP
------------------------------------------*/
 
class Map {
    constructor() {
        this.map = L.map('map').setView([49.8941708, 2.2956951], 13);
        this.layer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(this.map);
 
        this.checking();
    }
 
    ajaxGet(url, callback) {
        var req = new XMLHttpRequest();
        req.open("GET", url);
        req.addEventListener("load", function() {
            if (req.status >= 200 && req.status < 400) {
                callback(req.responseText);
            } else {
                console.error(req.status + " " + req.statusText + " " + url);
            }
        });
        req.addEventListener("error", function() {
            console.error("Erreur réseau avec l'URL " + url);
        });
        req.send(null);
    }
 
    //Ajouter Markers
    addMarkers() {
        this.ajaxGet('http://api.jcdecaux.com/vls/v1/stations?contract=amiens&apiKey=86e2bc05a438193dfbc09fcaa44634b7c6641d2c', function(reponse) {
            let datas = JSON.parse(reponse);
            datas.forEach((data) => {
                L.marker(Object.values(data.position), {
                        "data": data
                    })
                    .addTo(this.map)
                    .on("click", this.clickEvent.bind(this, data));
            });
        });
    }
 
    clickEvent(data) {
        const formulaire = new Formulaire(new Station(data));
        formulaire.showForm();
        if (data.status === "OPEN" && data.available_bikes > 0) {
            L.marker({ icon: this.iconBleue })
        } else {
            L.marker({ icon: this.iconRouge })
        }
    }
 
    checking() {
        if (Storage.hasStationInfo()) {
            console.log('Les données stations existent');
            /*Storage.getStation();*/
            this.clickEvent(Storage.getStation());
            console.log("Station: ", Storage.getStation());
        } else {
            sessionStorage.clear();
        }
    }
 
};
 
const myMap = new Map(); // point d'entrée c'est içi //plusieurs classes // jai essayé de respecter les standard js // chaque class a ses focntionnalités qui lyui sont propre // class particulier dom que je reference des données statiques // j'ai chaque class qui fait ça // cointrpl d'input avec déclaration d'évènements
myMap.addMarkers();


est-ce un problème avec le this ? pourtant, la valeur est bien lu içi :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
class Map {
    constructor() {
        this.map = L.map('map').setView([49.8941708, 2.2956951], 13);
        this.layer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(this.map);

Mais pas içi

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
 addMarkers() {
        this.ajaxGet('http://api.jcdecaux.com/vls/v1/stations?contract=amiens&apiKey=86e2bc05a438193dfbc09fcaa44634b7c6641d2c', function(reponse) {
            let datas = JSON.parse(reponse);
            datas.forEach((data) => {
                L.marker(Object.values(data.position), {
                        "data": data
                    })
                    .addTo(this.map)
                    .on("click", this.clickEvent.bind(this, data));
            });
        });
    }