Utiliser des données sur 2 fichiers javascript différents
Utilisateur anonyme
-
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
Bonjour à tous,
Je réalise actuellement un projet dans le cadre de mon cursus d'apprentissage du développement web. Je suis débutant en javascript et je rencontre la difficulté suivante :
Je dois mettre en place une carte de location de vélo, en utilisant l'API JC Decaux. Pour la carte, j'utilise Leaflet.
J'arrive à récupérer les données concernant les stations vélos, cependant lorsque j'essaie de lier ces données à la carte, j'ai des messages d'erreurs.
Voici le code:
HTML
AJAX
VELOS
CARTE
Je souhaite pouvoir réutiliser la variable tableau au sein de mon code CARTE, afin de pouvoir assimiler ces données à la variable marker (pour pouvoir positionner les marqueurs aux coordonées gps des stations vélo).
Merci d'avance pour votre aide.
Bonne journée.
Je réalise actuellement un projet dans le cadre de mon cursus d'apprentissage du développement web. Je suis débutant en javascript et je rencontre la difficulté suivante :
Je dois mettre en place une carte de location de vélo, en utilisant l'API JC Decaux. Pour la carte, j'utilise Leaflet.
J'arrive à récupérer les données concernant les stations vélos, cependant lorsque j'essaie de lier ces données à la carte, j'ai des messages d'erreurs.
Voici le code:
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" /> <link rel="stylesheet" type="text/css" href="carte/style-carte.css"/> <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script> <title>Projet 3</title> </head> <body> <div id="map"> </div> </body> <script src="api_jcdecaux/ajax.js" type="text/javascript"></script> <script src="api_jcdecaux/js-apivelo.js" type="text/javascript"></script> <script src="carte/carte.js" type="text/javascript"></script> </html>
AJAX
// Exécute un appel AJAX GET // Prend en paramètres l'URL cible et la fonction callback appelée en cas de succès function ajaxGet(url, callback) { var req = new XMLHttpRequest(); req.open("GET", url); req.addEventListener("load", function () { if (req.status >= 200 && req.status < 400) { // Appelle la fonction callback en lui passant la réponse de la requête 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); }
VELOS
var tableau; console.log(tableau); function afficher(reponse) { var infos = JSON.parse(reponse); infos.forEach(element => { var tableau = [element.name, element.position.lat]; }); } ajaxGet("https://api.jcdecaux.com/vls/v1/stations?contract=Lyon&apiKey=789c165dfe2e6ce623f45b8e2c5f44a9321931bc", afficher);
CARTE
var lat = 45.750000; var lon = 4.850000; var macarte = null; function initMap() { macarte = L.map('map').setView([lat, lon], 11); L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', { attribution: 'données © <a href="//osm.org/copyright">OpenStreetMap</a>/ODbL - rendu <a href="//openstreetmap.fr">OSM France</a>', minZoom: 1, maxZoom: 20 }).addTo(macarte); var marker = L.marker([lat, lon]).addTo(macarte); } window.onload = function(){ initMap(); };
#map { width: 800px; height: 500px; }
Je souhaite pouvoir réutiliser la variable tableau au sein de mon code CARTE, afin de pouvoir assimiler ces données à la variable marker (pour pouvoir positionner les marqueurs aux coordonées gps des stations vélo).
Merci d'avance pour votre aide.
Bonne journée.
A voir également:
- Utiliser des données sur 2 fichiers javascript différents
- Comment utiliser chromecast sur tv - Guide
- Supercopier 2 - Télécharger - Gestion de fichiers
- Renommer des fichiers en masse - Guide
- Trier des données excel - Guide
- Utiliser iphone comme webcam - Guide
1 réponse
Bonjour,
Premièrement... tu as un "var" en trop
ce qui réinitialise ton tableau à chaque tour de boucle...
Sachant que tu as déjà initialisé ton tableau au dessus
En plus, si tu as plusieurs elements à stocker dans ce tableau.. il faut faire un push
car là.. seule la dernière valeur sera présente dans ta variable.
Ensuite, dans le code carte .. d'où vient ta variable "L" ?
Et à quel moment fais tu le lien entre ta variable tableau et tes marker ?
Et pour finir.. tu nous dis avoir des messages d'erreur....ben..ça serait bien de nous les indiquer !
Premièrement... tu as un "var" en trop
infos.forEach(element => { var tableau = [element.name, element.position.lat]; });
ce qui réinitialise ton tableau à chaque tour de boucle...
Sachant que tu as déjà initialisé ton tableau au dessus
var tableau;
En plus, si tu as plusieurs elements à stocker dans ce tableau.. il faut faire un push
car là.. seule la dernière valeur sera présente dans ta variable.
Ensuite, dans le code carte .. d'où vient ta variable "L" ?
Et à quel moment fais tu le lien entre ta variable tableau et tes marker ?
Et pour finir.. tu nous dis avoir des messages d'erreur....ben..ça serait bien de nous les indiquer !