1 / 23

Introduction I. Maquette II. Inscription III. Recherche IV. Difficultés rencontrées Conclusion

Le projet SwitcHome. Introduction I. Maquette II. Inscription III. Recherche IV. Difficultés rencontrées Conclusion. Site Internet gratuit d’échange de maisons Cherche à améliorer le site et à attirer de nouveaux internautes. Maquette. Introduction I. Maquette II. Inscription

kedma
Download Presentation

Introduction I. Maquette II. Inscription III. Recherche IV. Difficultés rencontrées Conclusion

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Adeline COUPE, Hélène DRAUX, Ismaïla GIROUX, Loïc TACHET

  2. Le projet SwitcHome Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion • Site Internet gratuit d’échange de maisons • Cherche à améliorer le site et à attirer • de nouveaux internautes

  3. Maquette Introduction I.Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion • Ajout d’un système de GeoTagging • 2 axes de travail: • Ajout d’une annonce de maison à échanger • Recherche de maisons

  4. Page pour ajouter une annonce Ajout d’un bouton de géolocalisation: Introduction I.Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

  5. Page de Géolocalisation 2 types de géolocalisation possibles: par géocodage et par GPS Introduction I.Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

  6. Localisation avec l’adresse Introduction I.Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

  7. Localisation avec l’adresse Introduction I.Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

  8. Localisation avec des coordonnées GPS Introduction I.Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

  9. Récupération des coordonnées Champs latitude et longitude dans le formulaire d’inscription de l’annonce Introduction I.Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

  10. Page pour rechercher des maisons Introduction I.Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

  11. Association d’une info bulle à un tag Introduction I.Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

  12. La géolocalisation • Intégration des fonctionnalités de géolocalisation de Google Map: • Respect de la structure du site: • un fichier javascript : geolocalisation.js • un fichier javascript pour l’aide (génération d’une popup) : popup.js • un fichier HTML : appel aux fonctions javascript et programmation des boutons Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

  13. Les fonctions Google Map • Les fonctions Google Map utilisées : • Dans la fonction load() chargement de la carte initiale Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion map.addControl(new GLargeMapControl());// cette fonction permet d’ajouter les fonctions de zoom et de déplacement de Google Map map.addControl( new GMapTypeControl());// cette fonction permet d’ajouter les différentes vues plan, mixte, aérien

  14. Les fonctions Google Map map.setCenter(new GLatLng(34, 0), 1); // vue globale du monde geocoder = new GClientGeocoder();// autorise une nouvelle géolocalisation Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion Dans la page html la fonction load() est appelée 3 fois : -au chargement de la page -lors d’une géolocalisation par l’adresse -lors d’une localisation par GPS

  15. ADDRESS lat lon La géolocalisation: ShowAddress() • ShowAddress(address) : pour le geocodage • function showAddress(address) { • if (geocoder) { • geocoder.getLatLng( • address, • function(point) { • if (!point) { • alert(address + " veuillez rentrer une adresse valide :"+" "+"rue,ville,pays" ); • } else { Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

  16. La géolocalisation: ShowAddress() // création du marqueur repositionnable associé var marker = new GMarker(point, {draggable: true}); map.addOverlay(marker); // association de la bulle info au marqueur marker.openInfoWindowHtml(address+"<br />"+" lat="+point.y+" lon="+point.x+"<br/>"+"vous pouvez repositionner le marqueur en cliquant et en faisant glisser le marqueur,<br> si vous êtes satisfait par la position appuyez sur valider ma position"); Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

  17. La géolocalisation: ShowAddress() // gestion de l'événement " marqueur déplacé" GEvent.addListener(marker, "dragend", function() { // récupération du point associé au marqueur var pointnew=marker.getPoint(); // association de l'info-bulle correspondante marker.openInfoWindowHtml(address+"<br />"+" lat="+pointnew.y+" lon="+pointnew.x+"<br/>"+"vous pouvez repositionner le marqueur en cliquant et en faisant glisser le marqueur,<br> si vous êtes satisfait par la position appuyez sur valider ma position") ; Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

  18. latb lonb La géolocalisation : GPS( lat, lon) // création d'un point associé aux coordonnées GPS var pointb = new GLatLng(latb,lonb); // on centre la carte sur ce point map.setCenter(pointb, 13); // création du marqueur associé var markerb = new GMarker(pointb,{draggable: true}); // on ajoute le marqueur à la carte map.addOverlay(markerb); Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

  19. Validation de la position Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion JavaScript: document.forms["validation"].elements["lat"].value=latitude; document.forms["validation"].elements["lon"].value=longitude; HTML: <form name="validation" action="http://heleneliz.free.fr/GoogleMap/ajout_annonce.php"> latitude: <input type="text" name="lat" value=""> longitude: <input type="text" name="lon" value=""> <input type="submit" value="valider ma position" /> </form>

  20. Page ajouter une annonce Récupération de la latitude et de la longitude: <input type="text" name="latitude" value="<?php echo $_GET['lat'];?>" style="width:100px;" /> <input type="text" name="longitude" value="<?php echo $_GET['lon'];?>" style="width:100px;" /> Bouton “géolocaliser sa maison”: <input type="button" onclick="location.href='http://heleneliz.free.fr/GoogleMap/googleinscription.html'" value="Géolocaliser sa maison" /> Lien vers une FAQ: <a href="javascript:popup('FAQgeolocaliser.html','Aide','resizable=yes,location=no, width=600, height=300, menubar=no, status=no, scrollbars=yes, menubar=no')">A quoi ca sert? </a> Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

  21. Recherche Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

  22. Difficultésrencontrées Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

  23. Conclusion Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

More Related