Déplacement markeur en fonction de la BD

**OurysBack** · 14/10/2014, 14h06

Salut tout le monde....

Alors je suis entrain de faire un projet vraiment ambitieux mais sauf que je bloque sur un point qui m'empêche de dormir en ce moment

Le Projet :

*** Une Application mobile qui m'envoi les coordonnées du Terminal toutes les 10 secondes que je stocke dans une Base de Données MySQL (déjà fait).

*** Une page web (PHP / JavaScript) qui receuille ces coordonnées à partir de la BD commune et affiche sur une carte Google Map la position actuelle du Terminal (personne ou voiture par GPS) (dejà reussi).

Problème :

Le problème est qu'il faut que j'actualise à chaque fois la page web pour pouvoir suivre les déplacements sur la carte (trés fastidieux j'avoue

).

Ce que je voudrait c'est soit :

-- D'actualiser automatiquement toutes les 10 secondes ma carte Google Map (trés génant

) ou

-- A chaque modification c'est à dire à chaque fois qu'il y a de nouvelles coordonnées dans BD que le markeur puisse se déplacer lui aussi sur la carte.

Merci d'avantage pour votre eventuelle aide les amis

**NoSmoking** · 14/10/2014, 18h48

Bonjour,
- il existe la technique Ajax pour interroger ton serveur sans rechargement de la page.
- il existe la méthode setTimeout pour appeler une fonction au bout d'un délai.

En conjuguant les deux tu peux déplacer ton marqueur tranquillement toutes les 10s.

On en a déjà parler pas mal de fois sur ce forum!

[EDIT]lien sur une discussion où l'on en parle
http://www.developpez.net/forums/d13...s-progression/

**OurysBack** · 14/10/2014, 22h45

Merci beaucoup pour ta réponse je vais essayer apres je te dirais le resultat je suis pas en ce moment disponible pour reprendre

**OurysBack** · 15/10/2014, 12h20

Désolé mais je n ai rien compris sur le sujet que tu viens de me proposer, en fait j'aimerais juste avoir un petit bout de code qui me permettrait de rafraichir ma carte soit en fonction des données dans la BD oubien toutes les x secondes. Voici mon code source

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple Polylines</title>
 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script src="./jqueryV2.js"></script>
    <script>
 
function initialize() {
  var mapOptions = {
    zoom: 13,
    center: new google.maps.LatLng(14.756407, -17.455185),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
 
  var map = new google.maps.Map(document.getElementById("div_carte"), mapOptions);
 
  var flightPlanCoordinates = [
 
                <?php
                    $requete = 'SELECT * FROM coordonnees';
                    $resultat = mysql_query($requete) or die('La requête n\'a pas réussie');
                    while ($data = mysql_fetch_array($resultat))
                        {?>
                            new google.maps.LatLng(Number(<?php echo $data['latitude'];?>), Number(<?php echo $data['longitude'];?>)),
                 <?php  }?>
 
  ];
 
  var nbPoint = flightPlanCoordinates.length;
 
 
  var flightPath = new google.maps.Polyline({
        path: flightPlanCoordinates,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 1
  });
 
  flightPath.setMap(map);
 
  for (var i = 0; i < flightPlanCoordinates.length; i++){
      var pos0 = flightPlanCoordinates[0];
      var pos2 = flightPlanCoordinates[i];
  }
 
  var oMarker = new google.maps.Marker({
        position: pos0,
        setDraggable : (true),
        map: map
 
  });
 
 
  var oMarker = new google.maps.Marker({
        position: pos2,
        setDraggable : (true),
        map: map
  });
 
  var oInfo = new google.maps.InfoWindow({
        map : map,
        position : pos0,
        content: 'Point de depart'
  });
 
  var oInfo = new google.maps.InfoWindow({
        map : map,
        position : pos2,
        content: 'Point actuel'
  });
 
 
}
 
 
google.maps.event.addDomListener(window, 'load', initialize);
 
    </script>
  </head>
  <body>
  <div id="page">
  <div id="div_main">
    <h1>Géolocalisation</h1>
    <div id="div_carte"></div>
  </div>
</div>
 
 
  </body>
</html>

PS : Je ne suis pas bien en AJAX et merci pour ta précieuse aide

**NoSmoking** · 25/10/2014, 17h58

A voir donc Les meilleurs cours et tutoriels pour apprendre l'AJAX

- en commençant par Comprendre les mécanismes d'AJAX
- et une bonne approche Web 2.0, allez plus loin avec AJAX et XMLHttpRequest.

Déplacement markeur en fonction de la BD

APIs Google

Discussions similaires

Partager

Partager