slide1
Download
Skip this Video
Download Presentation
Introduction I. Maquette II. Inscription III. Recherche IV. Difficultés rencontrées Conclusion

Loading in 2 Seconds...

play fullscreen
1 / 23

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


  • 128 Views
  • Uploaded on

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

PowerPoint Slideshow about ' Introduction I. Maquette II. Inscription III. Recherche IV. Difficultés rencontrées Conclusion' - kedma


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
slide2

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
slide3

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
slide4

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

slide5

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

slide6

Localisation avec l’adresse

Introduction

I.Maquette

II. Inscription

III. Recherche

IV.Difficultés

rencontrées

Conclusion

slide7

Localisation avec l’adresse

Introduction

I.Maquette

II. Inscription

III. Recherche

IV.Difficultés

rencontrées

Conclusion

slide8

Localisation avec des coordonnées GPS

Introduction

I.Maquette

II. Inscription

III. Recherche

IV.Difficultés

rencontrées

Conclusion

slide9

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

slide10

Page pour rechercher des maisons

Introduction

I.Maquette

II. Inscription

III. Recherche

IV.Difficultés

rencontrées

Conclusion

slide11

Association d’une info bulle à un tag

Introduction

I.Maquette

II. Inscription

III. Recherche

IV.Difficultés

rencontrées

Conclusion

slide12

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

slide13

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

slide14

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

slide15

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

slide16

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

slide17

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

slide18

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

slide19

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>

slide20

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

slide21

Recherche

Introduction

I. Maquette

II. Inscription

III. Recherche

IV.Difficultés

rencontrées

Conclusion

slide22

Difficultésrencontrées

Introduction

I. Maquette

II. Inscription

III. Recherche

IV.Difficultés

rencontrées

Conclusion

slide23

Conclusion

Introduction

I. Maquette

II. Inscription

III. Recherche

IV.Difficultés

rencontrées

Conclusion

ad