Rechercher dans la communauté
Affichage des résultats pour les étiquettes 'base de données'.
1 résultat trouvé
-
Bonjour bonjour, Dans le cadre de la fac, on doit créer de toute pièce un site web. Le but du site est en gros de tracer son parcours de footing sur une map google, d'indiquer les conditions de la course (date/temps etc etc) et de faire partager le trajet, pour pouvoir courir à plusieurs au lieu de faire son footing tout seul. Je me suis occupé de la partie CSS du site, et mon camarade s'occupe de la base de données et de l'API Google Maps, et il a un soucis. Je suis pas assez fort pour pouvoir vous expliquer, donc je vous retranscrit son message : "je n'arrive pas à écrire le code qui récupère les infos fournies par getDirections() et le transfert à la page php parce que je ne comprend pas ce que je dois écrire... Bref, la partie ajax je ne comprend pas comment l'écrire, la partie php ça va à peu près, mais aucun intérêt si je n'arrive pas à écrire l'ajax." Est-ce que vous avez une solution ? Votre aide nous serait précieuse, on pensait réussir, mais on doit rendre le site niquel pour lundi soir. Je vous remercie ! Voici notre code php pour la map. <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Runtime map</title> <style> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } #panel { position: absolute; top: 5px; left: 25%; ; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=weather"></script> <script> // autorise la modification de l'itinéraire à la main var rendererOptions = { draggable: true }; var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); var directionsService = new google.maps.DirectionsService(); var map; // initialise la carte avec ses différentes fonctionnalités function initialize() { var mapOptions = { zoom:5, center: new google.maps.LatLng(44.833, -0567), // Modifie l'apparence des outils de contrôle de la map mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU }, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL }, streetViewControl: false, scaleControl: true, }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); // autorise la modification de l'itinéraire à la main. directionsDisplay.setMap(map); directionsDisplay.setPanel(document.getElementById('directionsPanel')); google.maps.event.addListener(directionsDisplay, 'directions_changed', function() { computeTotalDistance(directionsDisplay.getDirections()); alert('d'+directionsDisplay.getDirections().routes[0].legs[0].via_waypoints[0]); }); // applique la météo var weatherLayer = new google.maps.weather.WeatherLayer({ temperatureUnits: google.maps.weather.TemperatureUnit.DEGREES }); weatherLayer.setMap(map); calcRoute(); } // calcul de l'itinéraire function calcRoute(start, end) { var start = document.getElementById('start').value; var end = document.getElementById('end').value; var request = { origin:start, destination:end, travelMode: google.maps.TravelMode.WALKING }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } }); } //calcul de la distance parcourue function computeTotalDistance(result) { var total = 0; var myroute = result.routes[0]; for (var i = 0; i < myroute.legs.length; i++) { total += myroute.legs[i].distance.value; } total = total / 1000.0; document.getElementById('total').innerHTML = total + ' km'; } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="panel"> <form id="calculate-route" name="calculate-route" action="#" method="get"> <label for="from">From:</label> <input type="text" id="start" name="from" required="required" placeholder="Run starts here" size="30" /> <label for="to">To:</label> <input type="text" id="end" name="to" required="required" placeholder="Run ends here" size="30" /> <br /> <input type="button" value="Calculer l'itinéraire" onclick="javascript:calcRoute(start, end)" /> </form> </div> <div id="map-canvas" style="float:left;width:75%; height:100%"></div> <div id="directionsPanel" style="float:right;width:25%;height 100%"> <p>Total Distance: <span id="total"></span></p> </div> </body> </html>
