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


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


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


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

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


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


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


Localisation avec l’adresse

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


Localisation avec des coordonnées GPS

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


Page pour rechercher des maisons

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


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


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


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


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


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


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


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


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>


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


Recherche

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


Conclusion

Introduction

I. Maquette

II. Inscription

III. Recherche

IV.Difficultés

rencontrées

Conclusion


  • Login