this.map est undefined lors de la récupération des données
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 :
Citation:
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:
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: '© <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:
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: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(this.map); |
Mais pas içi
Code:
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));
});
});
} |
