Menu

Problème de portée d'une variable [Résolu]

europe21 23 Messages postés mardi 26 décembre 2017Date d'inscription 6 avril 2018 Dernière intervention - 26 déc. 2017 à 13:23 - Dernière réponse : europe21 23 Messages postés mardi 26 décembre 2017Date d'inscription 6 avril 2018 Dernière intervention
- 28 déc. 2017 à 13:55
Bonjour a tous, j'ai un problème de portée d'une de mes variables dans mon objet .Le problème de mon code c'est que j' essaie d'accéder à marker en dehors de la fonction anonyme.

Voici mon code:

ar googleMap = {
    map: "",
    markers: [],
    urlDecaux: "https://api.jcdecaux.com/vls/v1/stations?contract=Paris&apiKey=8a21045d07375cf3ca1a9fbd663ca141df365f16",
    marker:"",
 
init:function initMap() {
    //Constructeur crait une nouvelle map- il faut seulement le centre et le zoom.
    googleMap.map = new google.maps.Map(document.getElementById('map'), {
        center: {
            lat: 48.866667
            , lng: 2.333333
        }
        , zoom: 15
    });
    // Position des endroit a marquer
    ajaxGet(googleMap.urlDecaux, function (reponse) {
        // Transforme la réponse en un tableau d'articles
        var locations = JSON.parse(reponse)
        console.log(locations)
        var largeInfowindow = new google.maps.InfoWindow();
        var bounds = new google.maps.LatLngBounds();
        // Le groupe suivant utilise le tableau d'emplacement pour créer un tableau de marqueurs à l'initialisation.
        for (var i = 0; i < locations.length; i++) {
            // Récupère la position du tableau de localisation.
            var position = locations[i].position;
            var name = locations[i].name;
            var address = locations[i].address;
            var status = locations[i].status;
            var available_bike_stands = locations[i].available_bike_stands;
            var available_bikes = locations[i].available_bikes;
            var icon = {
                url: '/img/marker vert.png', // url
                scaledSize: new google.maps.Size(45, 45), // scaled size
                origin: new google.maps.Point(0, 0), // origin
                anchor: new google.maps.Point(0, 0) // anchor
            };
            var iconBleu = {
                url: '/img/google-maps-md.png', // url
                scaledSize: new google.maps.Size(45, 45), // scaled size
                origin: new google.maps.Point(0, 0), // origin
                anchor: new google.maps.Point(0, 0) // anchor
            };
            // Crée un marqueur par emplacement et le place dans le tableau des marqueurs.
            var marker = new google.maps.Marker({
                map: googleMap.map
                , icon: icon
                , position: position
                , name: name
                , address: address
                , status: status
                , available_bike_stands: available_bike_stands
                , available_bikes: available_bikes
                , animation: google.maps.Animation.DROP
                , id: i
            });
            if (locations.status = "CLOSE") {
                icon = iconBleu;
            }
            else { // nombre <= 0
                icon = icon;
            };
            //Rajoute le marqueur sur notre tableau de marqueurs
            googleMap.markers.push(marker);
            // Crée un événement onclick pour ouvrir une infowindow à chaque marqueur.
            marker.addListener('click', function () {
                infoTableau(this);
            });
             
             
             
        }
    });
},
 
 
 
}
function infoTableau(marker, info) {
    document.getElementById("reservation").style.visibility = "visible";
    document.getElementById("station").innerHTML = marker.name;
    document.getElementById("address").innerHTML = marker.address;
    document.getElementById("statut").innerHTML = marker.status;
    document.getElementById("placeDispo").innerHTML = marker.available_bike_stands;
    document.getElementById("veloDispo").innerHTML = marker.available_bikes;
 
}
button01.addEventListener("click", function () {
    document.getElementById("cadre").style.visibility = "visible";
});
 
document.getElementById('confirm').addEventListener("click", function () {
    <span style="color:#ff0000;">document.getElementById("recap").innerHTML ='1 vélo reserver à la station '+ marker.name+ ' pour ';
   var rebour = Object.create(chrono);
    setInterval('chrono.secondPassed()', 1000);
    document.getElementById("cadre").style.visibility = "hidden";
});

EDIT : Ajout du LANGAGE dans les balises de code (la coloration syntaxique).

Explications disponibles ici :ICI

Merci d'y penser dans tes prochains messages.
Jordane45

Comment puis réutiliser ma variable? Si quelqu'un pouvait m'aider,merci.
stephan
Afficher la suite 

7 réponses

Répondre au sujet
jordane45 20602 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 23 avril 2018 Dernière intervention - 26 déc. 2017 à 13:42
0
Utile
Bonjour,

Tu déclares ta variable en dehors de toute fonction.
Elle sera ainsi "globale"

Exemple :
var id;

function truc(){
   id = 10;
}

function test(){
  alert(id);
} 
 

function bidule(){
  truc();
  test();
  //on rechange l'id :
  id=60;
  test();
}

budule();

Commenter la réponse de jordane45
europe21 23 Messages postés mardi 26 décembre 2017Date d'inscription 6 avril 2018 Dernière intervention - 26 déc. 2017 à 14:06
0
Utile
1
oui mais comment faire dans mon cas. car j'ai besoins des propriétés de cette variable qu'elle possède a l'interieur de cette fonction anonyme,je ne sais pas si je suis clair. En fait il faut que je recupere la valeur de marker.name pour l'afficher autre part dans ma page.
jordane45 20602 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 23 avril 2018 Dernière intervention - 26 déc. 2017 à 20:55
Tu déclares marker en dehors des fonctions.... (comme tu l'as fait pour les autres variables au début de ton script).
La variable marker.name sera donc accessible de partout dans ton code.....

Mais... sans savoir ce que tu veux exactement en faire... dur de t'en dire plus
Commenter la réponse de europe21
europe21 23 Messages postés mardi 26 décembre 2017Date d'inscription 6 avril 2018 Dernière intervention - 27 déc. 2017 à 10:12
0
Utile
3
Merci pour ta patience.
J'ai essayé de la mettre en dehors de fonctions mais cela ne marche pas.
En fait j'ai quelques contraintes qui me sont imposé dans mon projet. Le code doit être orienté objet, et il doit y avoir un fichier par objet.
J'ai ma map avec la position des stations velib,quand je clic sur une station je recupere les infos dans mon tableau d'info qui apparait. ensuite si on valide, un canvas signature apparait(jusqu'ici c'est bon), et si on confirme le canvas un message doit apparaitre(qui en principe doit etre mon objet "reservation") avec le nom de la station(c'est la que je doit recuperer "marker.name") et une minuterie pour limiter la reservation et conserver cela dans un session storage.
je te donne mon lien, ne fait pas attention au design du site je n'y ai pas encore travaillé dessus:
http://velib.stephan-serri.compteweb.com/
merci de ton aide
jordane45 20602 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 23 avril 2018 Dernière intervention - 27 déc. 2017 à 10:48
Je ne suis pas allé voir ton site ..
mais :

J'ai ma map avec la position des stations velib,quand je clic sur une station je recupere les infos dans mon tableau d'info qui apparait. ensuite si on valide, un canvas signature apparait(jusqu'ici c'est bon), et si on confirme le canvas un message doit apparaitre(qui en principe doit etre mon objet "reservation")

Comment fais tu pour passer de :
je clic sur une station je recupere les infos dans mon tableau d'info qui apparait.--->>> si on valide, un canvas signature apparait(jusqu'ici c'est bon)

Pour la suite.. tu n'as qu'à procéder de la même manière ... tu transmets les infos que tu as dans ton canvas vers la confirmation.
Je ne comprend pas où est le souci....

Donc.. soit tu fais transiter les variables dans les paramètres de tes fonctions ..... soit tu initialise un objet (en dehors de toutes fonctions...) que tu remplis avec les infos souhaitées ... et qui seront alors accessibles depuis toutes tes autres fonctions (ce que je te décrie depuis le début).
europe21 23 Messages postés mardi 26 décembre 2017Date d'inscription 6 avril 2018 Dernière intervention - 27 déc. 2017 à 11:15
Ok merci je vais essayé.
europe21 23 Messages postés mardi 26 décembre 2017Date d'inscription 6 avril 2018 Dernière intervention - 28 déc. 2017 à 13:55
Merci beaucoup,grâce a tous tes conseils j'ai réussi.
J'avoue que je n'est pas encore acquis toute la logique javascript.
Commenter la réponse de europe21