Adeline COUPE, Hélène DRAUX, Ismaïla GIROUX, Loïc TACHET
This presentation is the property of its rightful owner.
Sponsored Links
1 / 23

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


  • 93 Views
  • Uploaded on
  • Presentation posted in: General

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

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Introduction i maquette ii inscription iii recherche iv difficult s rencontr es conclusion

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


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


Introduction i maquette ii inscription iii recherche iv difficult s rencontr es conclusion

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


Introduction i maquette ii inscription iii recherche iv difficult s rencontr es conclusion

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


Introduction i maquette ii inscription iii recherche iv difficult s rencontr es conclusion

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


Introduction i maquette ii inscription iii recherche iv difficult s rencontr es conclusion

Localisation avec l’adresse

Introduction

I.Maquette

II. Inscription

III. Recherche

IV.Difficultés

rencontrées

Conclusion


Introduction i maquette ii inscription iii recherche iv difficult s rencontr es conclusion

Localisation avec l’adresse

Introduction

I.Maquette

II. Inscription

III. Recherche

IV.Difficultés

rencontrées

Conclusion


Introduction i maquette ii inscription iii recherche iv difficult s rencontr es conclusion

Localisation avec des coordonnées GPS

Introduction

I.Maquette

II. Inscription

III. Recherche

IV.Difficultés

rencontrées

Conclusion


Introduction i maquette ii inscription iii recherche iv difficult s rencontr es conclusion

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


Introduction i maquette ii inscription iii recherche iv difficult s rencontr es conclusion

Page pour rechercher des maisons

Introduction

I.Maquette

II. Inscription

III. Recherche

IV.Difficultés

rencontrées

Conclusion


Introduction i maquette ii inscription iii recherche iv difficult s rencontr es conclusion

Association d’une info bulle à un tag

Introduction

I.Maquette

II. Inscription

III. Recherche

IV.Difficultés

rencontrées

Conclusion


Introduction i maquette ii inscription iii recherche iv difficult s rencontr es conclusion

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


Introduction i maquette ii inscription iii recherche iv difficult s rencontr es conclusion

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


Introduction i maquette ii inscription iii recherche iv difficult s rencontr es conclusion

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


Introduction i maquette ii inscription iii recherche iv difficult s rencontr es conclusion

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


Introduction i maquette ii inscription iii recherche iv difficult s rencontr es conclusion

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


Introduction i maquette ii inscription iii recherche iv difficult s rencontr es conclusion

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


Introduction i maquette ii inscription iii recherche iv difficult s rencontr es conclusion

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


Introduction i maquette ii inscription iii recherche iv difficult s rencontr es conclusion

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>


Introduction i maquette ii inscription iii recherche iv difficult s rencontr es conclusion

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


Introduction i maquette ii inscription iii recherche iv difficult s rencontr es conclusion

Recherche

Introduction

I. Maquette

II. Inscription

III. Recherche

IV.Difficultés

rencontrées

Conclusion


Introduction i maquette ii inscription iii recherche iv difficult s rencontr es conclusion

Difficultésrencontrées

Introduction

I. Maquette

II. Inscription

III. Recherche

IV.Difficultés

rencontrées

Conclusion


Introduction i maquette ii inscription iii recherche iv difficult s rencontr es conclusion

Conclusion

Introduction

I. Maquette

II. Inscription

III. Recherche

IV.Difficultés

rencontrées

Conclusion


  • Login