Utiliser des données sur 2 fichiers javascript différents

Fermé
Utilisateur anonyme - 28 déc. 2018 à 10:47
jordane45 Messages postés 38469 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 22 avril 2025 - 28 déc. 2018 à 12:01
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 
<!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:

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38469 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 22 avril 2025 4 741
28 déc. 2018 à 12:01
Bonjour,

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 !
0

Discussions similaires

Voxbone ? qui est-ce ?
fanfan54 -
djakool4 -

158 réponses