Post on 19-Mar-2016
description
Adeline COUPE, Hélène DRAUX, Ismaïla GIROUX, Loïc TACHET
SOUTENANCE FINALE
DU PROJET SWITCHOME
2Projet SwitcHome
Introduction
I. Maquette
II. Inscription
III. Recherche
IV.Difficultés
rencontrées
Conclusion
Le projet SwitcHome
• Site Internet gratuit d’échange de maisons
• Cherche à améliorer le site et à attirer
de nouveaux internautes
3Projet SwitcHome
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
4Projet SwitcHome
Page pour ajouter une annonce
Introduction
I. Maquette
II. Inscription
III. Recherche
IV.Difficultés
rencontrées
Conclusion
Ajout d’un bouton de géolocalisation:
5Projet SwitcHome
Page de Géolocalisation
Introduction
I. Maquette
II. Inscription
III. Recherche
IV.Difficultés
rencontrées
Conclusion
2 types de géolocalisation possibles: par géocodage et par GPS
6Projet SwitcHome
Localisation avec l’adresse
Introduction
I. Maquette
II. Inscription
III. Recherche
IV.Difficultés
rencontrées
Conclusion
7Projet SwitcHome
Localisation avec l’adresse
Introduction
I. Maquette
II. Inscription
III. Recherche
IV.Difficultés
rencontrées
Conclusion
8Projet SwitcHome
Localisation avec des coordonnées GPS
Introduction
I. Maquette
II. Inscription
III. Recherche
IV.Difficultés
rencontrées
Conclusion
9Projet SwitcHome
Récupération des coordonnées
Introduction
I. Maquette
II. Inscription
III. Recherche
IV.Difficultés
rencontrées
Conclusion
Champs latitude et longitude dans le formulaire d’inscription de l’annonce
10Projet SwitcHome
Page pour rechercher des maisons
Introduction
I. Maquette
II. Inscription
III. Recherche
IV.Difficultés
rencontrées
Conclusion
11Projet SwitcHome
Association d’une info bulle à un tag
Introduction
I. Maquette
II. Inscription
III. Recherche
IV.Difficultés
rencontrées
Conclusion
12Projet SwitcHome
La géolocalisation
Introduction
I. Maquette
II. Inscription
III. Recherche
IV.Difficultés
rencontrées
Conclusion
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
13Projet SwitcHome
Les fonctions Google Map
Introduction
I. Maquette
II. Inscription
III. Recherche
IV.Difficultés
rencontrées
Conclusion
Les fonctions Google Map utilisées :
• Dans la fonction load() chargement de la carte initiale
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
14Projet SwitcHome
Les fonctions Google Map
Introduction
I. Maquette
II. Inscription
III. Recherche
IV.Difficultés
rencontrées
Conclusion
map.setCenter(new GLatLng(34, 0), 1); // vue globale du monde
geocoder = new GClientGeocoder(); // autorise une nouvelle géolocalisation
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
15Projet SwitcHome
La géolocalisation: ShowAddress()
Introduction
I. Maquette
II. Inscription
III. Recherche
IV.Difficultés
rencontrées
Conclusion
• 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 {
ADDRESS
latlon
16Projet SwitcHome
Introduction
I. Maquette
II. Inscription
III. Recherche
IV.Difficultés
rencontrées
Conclusion
// 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");
La géolocalisation: ShowAddress()
17Projet SwitcHome
Introduction
I. Maquette
II. Inscription
III. Recherche
IV.Difficultés
rencontrées
Conclusion
// 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") ;
La géolocalisation: ShowAddress()
18Projet SwitcHome
La géolocalisation : GPS( lat, lon)
Introduction
I. Maquette
II. Inscription
III. Recherche
IV.Difficultés
rencontrées
Conclusion
// 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 cartemap.addOverlay(markerb);
latb lonb
19Projet SwitcHome
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>
20Projet SwitcHome
Page ajouter une annonce
Introduction
I. Maquette
II. Inscription
III. Recherche
IV.Difficultés
rencontrées
Conclusion
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>
21Projet SwitcHome
Recherche
Introduction
I. Maquette
II. Inscription
III. Recherche
IV.Difficultés
rencontrées
Conclusion
22Projet SwitcHome
Difficultés rencontrées
Introduction
I. Maquette
II. Inscription
III. Recherche
IV.Difficultés
rencontrées
Conclusion
23Projet SwitcHome
Conclusion
Introduction
I. Maquette
II. Inscription
III. Recherche
IV.Difficultés
rencontrées
Conclusion