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

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


  • 114 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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha

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


ad
  • Login