Discussion :

[Invité]

Bonjour,

J'essaie en vain de récupérer des données stockées dans les options des markers dans la méthode clickMarker, mais je n'y arrive pas.
Le but c'est qu'en cliquant sur le markeur, toutes ses infos viennent se mettre dans des divs spécifiques.

Pour l'exercice je suis obligée de créer une classe, je l'ai donc étendue.

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
export default class MapLeaflet extends L.Class {
    constructor(conteneur, latitude, longitude) {
        super();
        this.apiObj = L;
        this.conteneur = document.getElementById(conteneur);
        this.fond = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}';
        this.fondId = 'mapbox.streets';
        this.accessToken = 'pk.eyJ1IjoibGF1cmF0b21hc2luaSIsImEiOiJjanRscnRiODIyNDY1NDNteHduazJ5OHdkIn0.xw9htpDdxcy75-KKmILUwg'
        this.lat = latitude;
        this.lng = longitude;
        this.positionInitiale = [this.lat, this.lng];
        this.myMap = this.apiObj.map(this.conteneur).setView(this.positionInitiale, 14);
    }
 
    createMap() {
        // CREATION DU CALQUE IMAGE DE LA CARTE
        this.apiObj.tileLayer(this.fond, {
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 18,
            id: this.fondId,
            accessToken: this.accessToken
        }).addTo(this.myMap);
    }
 
    createMarker() {
        // AJOUT DES MARKEURS
        for (let i = 0; i < rep.length; i++) {
            this.apiObj.marker(
                [rep[i].position.lat, rep[i].position.lng],
                {
                    "title": rep[i].name,
                }
            )
                .on('click', () => {this.clickMarker()})
                .addTo(this.myMap);
        };
    }
 
 
    clickMarker() {
        // recuperation des données des markeurs
        this.stationName = this.apiObj.marker.options.title;
        document.getElementById('stationName').innerHTML = this.stationName;
    }
}