[PHP, JS] Tracer des lignes avec l'API Google maps

**tengalice49** · 14/06/2018, 09h19

Hello,

Pour realiser le suivi d'un objet, j'aimerais afficher des lignes entre les positions successives de mon GPS.
En suivant ce tuto j'arrive a tracer des lignes mais c'est moi qui ecrit les coordonnees a la main.

Je recupere mes donnees GPS qui sont sotckees dans un tableau comme cela:

Code php :

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
96
97
98
99
<h2>Démo récupération données SigFox par l'API"</h2>
    <table>
        <thead>
            <tr>
                <th>Ref.</th>
                <th>Heure</th>
                <th>Data</th>
                <th>Lat</th>
                <th>Long</th>
                <th>Alt</th>
                <th>Temp</th>
                <th>SNR</th>
                <th>Qualite_Liaison</th>
            </tr>
        </thead>
    <tbody>
    <?php
    //$current = current($data['data']);
    //var_dump($current);
    $current_tab = current($data['data']);
    $current_data = $current_tab['data'];
    //var_dump($current_data);
    $current_lat=substr($current_data, 0,6);
    $current_lat_int = hexdec($current_lat); //conversion hexa -> decimal
    $current_lat_result = $current_lat_int/(float)(0xFFFFFF/360.0)-180; //conversion, precision
    //echo $current_lat_result;
 
    $current_long=substr($current_data, 6,6);
    $current_long_int = hexdec($current_long); //conversion hexa -> decimal
    $current_long_result = $current_long_int/(float)(0xFFFFFF/180.0)-90; //conversion, 
    //echo $current_long_result;
 
    $current_alt=substr($current_data, 12,4);
    $current_alt_int = hexdec($current_alt); //conversion hexa -> decimal
    //echo $current_alt_int;
 
    foreach($data['data'] as $reg){
      //print_r($data);
    ?>
    <tr>
        <td><?php echo $reg['device'];?></td>
        <td><?php echo date(DATE_RFC2822, $reg['time']);?></td>
 
        <td><?php 
        $data= $reg['data'];  //frame data
        echo $data;
        ?></td>
        <td><?php
        $lat_str = substr($data, 0, 6); //6 premiers caracteres
        $lat_int = hexdec($lat_str); //conversion hexa -> decimal
        $lat_result = $lat_int/(float)(0xFFFFFF/360.0)-180; //conversion, precision
        echo $lat_result; 
        ?></td>
 
        <td><?php
        $long_str = substr($data, 6, 6);
        $long_int = hexdec($long_str);
        $long_result = $long_int/(float)(0xFFFFFF/180.0)-90; //conversion, precision
        echo $long_result;
        ?></td>
 
        <td><?php
        $alt_str = substr($data, 12, 4);
        $alt_int = hexdec($alt_str);
        echo $alt_int;
        ?></td> 
        <td><?php
        $temp_str = substr($data, 16, 4);
        $temp_int = hexdec($temp_str);
        $temp_result = $temp_int/(float)(0xFFFF/200.0)-128; //conversion, precision
        echo $temp_result;
        ?></td>
 
        <td><?php echo $reg['snr'];?></td>
        <td><?php
        $qualite= $reg['linkQuality'];
        switch ($qualite) {
            case "EXCELLENT":
                echo "Excellente";
                break;
            case "GOOD":
                echo "Bonne";
                break;
            case "AVERAGE":
                echo "Moyenne";
                break;
            case "LIMIT" :
                echo "Faible";
                break;
        }
        ?>
 
        </td>
    </tr>
    <?php
     }
    ?>
    </tbody>
    </table>

Ce qui donne cela:
Nom : tabsigfoxgps.jpg
Affichages : 664
Taille : 417,1 Ko

Pour tracer les lignes j'ai le code suivant:

Code js :

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
var flightPlanCoordinates = [
         // {lat: lat, lng: long},
          {lat: <?php echo $current_lat_result; ?>, lng: <?php echo $current_long_result; ?>},
          {lat: -18.143333422, lng: 178.431},
          {lat: -27.4325567, lng: 153.02235257},
          {lat: 56.2, lng: 18.3},
          {lat: 12.2, lng: 33.356363},
          {lat: 44, lng: 62.3},
          {lat: 4.2, lng: 62.3}
        ];
 var flightPath = new google.maps.Polyline({
          path: flightPlanCoordinates,
          geodesic: true,
          strokeColor: '#FF0000',
          strokeOpacity: 1.0,
          strokeWeight: 2
        });
 
 flightPath.setMap(map);

Ici le point de depart c'est ma position actuelle et les autres positions ont ete rentrees a la main.
Nom : trajetmap.jpg
Affichages : 685
Taille : 128,3 Ko

Nom : trajetmap.jpg
Affichages : 685
Taille : 128,3 Ko

Comment faire pour qu'a chaque fois qu'une position GPS s'ajoute dans mon tableau, une ligne soit tracee entre la position precedente et cette nouvelle position GPS ?

Merci!

EDIT:
En ecrivant cela j'obtiens un trace entre ma position actuelle (qui est la premiere position de mon tableau) et la derniere position du tableau:

Code js :

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

1
2
3
4
var flightPlanCoordinates = [
        {lat: <?php echo $lat_result; ?>, lng: <?php echo $long_result; ?>},  
        {lat: <?php echo $current_lat_result; ?>, lng: <?php echo $current_long_result; ?>}
        ];

Nom : map.jpg
Affichages : 652
Taille : 72,2 Ko

Bon, il me manque plus que toutes les positions entre le debut et la fin..

Je suppose que je dois faire une boucle et j'essaye des trucs mais pour l'instant je n'y arrive pas.

**Celira** · 14/06/2018, 11h10

Ce qu'il faut que tu fasses, c'est alimenter les données javascript avec les données PHP. Ce que je ferais personnellement, c'est stocker dans un tableau PHP toutes les données dont tu vas avoir besoin et ensuite utiliser ce tableau pour écrire le JS.

Comment utiliser en JavaScript un tableau PHP ?

**tengalice49** · 14/06/2018, 11h19

Salut merci pour ta reponse,

j'ai essaye de parcourir mon tableau php (qui existe deja) et d'ecrire le JS en fonction de ce tableau conne cela:

Code php :

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
var flightPlanCoordinates = [
        {lat: <?php echo $lat_result; ?>, lng: <?php echo $long_result; ?>},  //1ere coordonnee du tableau
        <?php
        foreach($data['data'] as $reg1){
          $data1= $reg1['data'];  //frame data
          $inter_lat_str = substr($data1, 0, 6); //6 premiers caracteres
          $inter_lat_int = hexdec($inter_lat_str); //conversion hexa -> decimal
          $inter_lat_result = $inter_lat_int/(float)(0xFFFFFF/360.0)-180; //conversion, precision  
 
          $inter_long_str = substr($data1, 6, 6);
          $inter_long_int = hexdec($inter_long_str);
          $inter_long_result = $inter_long_int/(float)(0xFFFFFF/180.0)-90; //conversion, precision?>
          {lat: <?php echo $inter_lat_result; ?>, lng: <?php echo $inter_long_result; ?>},  //coordonnees intermediaires
        <?php
          }  
        ?>
        {lat: <?php echo $current_lat_result; ?>, lng: <?php echo $current_long_result; ?>} //coordonnee actuelle (derniere coordonnee du tableau)
        ];

Cependant, il n'y a que la ligne 2 et la derniere ligne qui sont prises en compte, c'est a dire que j'ai un trait qui se fait entre la premiere et la derniere coo de mon tableau, mais les positions intermediaires ne sont pas traitees. Je vais suivre ton lien au cas ou j'aurais mal fait mon tableau mais si tu vois une erreur dans le code ci-dessus je veux bien le savoir

Merci

EDIT: En fait cette ligne n'est pas comprise:

Code :

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

{lat: <?php echo $inter_lat_result; ?>, lng: <?php echo $inter_long_result; ?>},  //coordonnees intermediaires

Car meme si j'entre des coordonnees a la main il ne se passe rien

**Celira** · 14/06/2018, 11h28

Hum... tu as vérifié dans la source HTML générée que tu as bien ta liste de points ?

**tengalice49** · 14/06/2018, 11h38

Ma liste de points ?

Je te mets le code complet (fichier .php) avec le resultat affiche a l'ecran parce que j'ai pas trop compris ta question

Code php :

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
 
<?php
 
            $user = cache;
            $password = cache;
            $url =cache;
            $ch = curl_init();
            curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, true);
            curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
            curl_setopt($ch, CURLOPT_URL,$url);
            curl_setopt($ch, CURLOPT_USERPWD, "$user:$password");
            $result=curl_exec($ch);
            curl_close($ch);
            $data = (json_decode($result, true));
?>
 
    <h2>Démo récupération données SigFox par l'API"</h2>
    <table>
        <thead>
            <tr>
                <th>Ref.</th>
                <th>Heure</th>
                <th>Data</th>
                <th>Lat</th>
                <th>Long</th>
                <th>Alt</th>
                <th>Temp</th>
                <th>SNR</th>
                <th>Qualite_Liaison</th>
            </tr>
        </thead>
    <tbody>
    <?php
    //$current = current($data['data']);
    //var_dump($current);
    $current_tab = current($data['data']);
    $current_data = $current_tab['data'];
    //var_dump($current_data);
    $current_lat=substr($current_data, 0,6);
    $current_lat_int = hexdec($current_lat); //conversion hexa -> decimal
    $current_lat_result = $current_lat_int/(float)(0xFFFFFF/360.0)-180; //conversion, precision
    //echo $current_lat_result;
 
    $current_long=substr($current_data, 6,6);
    $current_long_int = hexdec($current_long); //conversion hexa -> decimal
    $current_long_result = $current_long_int/(float)(0xFFFFFF/180.0)-90; //conversion, 
    //echo $current_long_result;
 
    $current_alt=substr($current_data, 12,4);
    $current_alt_int = hexdec($current_alt); //conversion hexa -> decimal
    //echo $current_alt_int;
 
    foreach($data['data'] as $reg){
      //print_r($data);
    ?>
    <tr>
        <td><?php echo $reg['device'];?></td>
        <td><?php echo date(DATE_RFC2822, $reg['time']);?></td>
 
        <td><?php 
        $data= $reg['data'];  //frame data
        echo $data;
        ?></td>
        <td><?php
        $lat_str = substr($data, 0, 6); //6 premiers caracteres
        $lat_int = hexdec($lat_str); //conversion hexa -> decimal
        $lat_result = $lat_int/(float)(0xFFFFFF/360.0)-180; //conversion, precision
        echo $lat_result; 
        ?></td>
 
        <td><?php
        $long_str = substr($data, 6, 6);
        $long_int = hexdec($long_str);
        $long_result = $long_int/(float)(0xFFFFFF/180.0)-90; //conversion, precision
        echo $long_result;
        ?></td>
 
        <td><?php
        $alt_str = substr($data, 12, 4);
        $alt_int = hexdec($alt_str);
        echo $alt_int;
        ?></td> 
        <td><?php
        $temp_str = substr($data, 16, 4);
        $temp_int = hexdec($temp_str);
        $temp_result = $temp_int/(float)(0xFFFF/200.0)-128; //conversion, precision
        echo $temp_result;
        ?></td>
 
        <td><?php echo $reg['snr'];?></td>
        <td><?php
        $qualite= $reg['linkQuality'];
        switch ($qualite) {
            case "EXCELLENT":
                echo "Excellente";
                break;
            case "GOOD":
                echo "Bonne";
                break;
            case "AVERAGE":
                echo "Moyenne";
                break;
            case "LIMIT" :
                echo "Faible";
                break;
        }
        ?>
 
        </td>
    </tr>
    <?php
     }
    ?>
    </tbody>
    </table>
 
<script type="text/javascript">
  var map;
  var initialize;
  var lat = '<?php echo $current_lat_result; ?>';
  var long = '<?php echo $current_long_result; ?>';
 
initialize = function(){
  var latLng = new google.maps.LatLng(lat, long); // Correspond au coordonnées du gps
  var myOptions = {
    zoom      : 14, // Zoom par défaut
    center    : latLng, // Coordonnées de départ de la carte de type latLng 
    mapTypeId : google.maps.MapTypeId.TERRAIN, // Type de carte, différentes valeurs possible HYBRID, ROADMAP, SATELLITE, TERRAIN
    maxZoom   : 20
  };
 
  map = new google.maps.Map(document.getElementById('map'), myOptions);
 
  var marker = new google.maps.Marker({
    position : latLng,
    map      : map,
    title    : "Baloon position"
  });
 
 
 
  var contentMarker = [
      '<div id="containerTabs">',
      '<div id="tabs">',
      '<p id="voiture">Baloon</p>',
      '<p id="voiture">Lat:<?php echo $current_lat_result; ?></p>',
      '<p id="voiture">Long:<?php echo $current_long_result; ?></p>',
      '<p id="voiture">Alt:<?php echo $current_alt_int; ?></p>',
      '</div>',
      '</div>',
      '</div>'
  ].join('');
 
  var infoWindow = new google.maps.InfoWindow({
    content  : contentMarker,
    position : latLng
  });
 
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.open(map,marker);
  });
 
  google.maps.event.addListener(infoWindow, 'domready', function(){ // infoWindow est biensûr notre info-bulle
    jQuery("#tabs").tabs();
  });
 
 
 
var flightPlanCoordinates = [
        {lat: <?php echo $lat_result; ?>, lng: <?php echo $long_result; ?>},  //1ere coordonnee du tableau
        <?php
        foreach($data['data'] as $reg1){
          $data1= $reg1['data'];  //frame data
          $inter_lat_str = substr($data1, 0, 6); //6 premiers caracteres
          $inter_lat_int = hexdec($inter_lat_str); //conversion hexa -> decimal
          $inter_lat_result = $inter_lat_int/(float)(0xFFFFFF/360.0)-180; //conversion, precision  
 
          $inter_long_str = substr($data1, 6, 6);
          $inter_long_int = hexdec($inter_long_str);
          $inter_long_result = $inter_long_int/(float)(0xFFFFFF/180.0)-90; //conversion, precision?>
          {lat: <?php echo $inter_lat_result; ?>, lng: <?php echo $inter_long_result; ?>},  //coordonnees intermediaires
        <?php
          }  
        ?>
        {lat: <?php echo $current_lat_result; ?>, lng: <?php echo $current_long_result; ?>} //coordonnee actuelle (derniere coordonnee du tableau)
        ];
  var flightPath = new google.maps.Polyline({
          path: flightPlanCoordinates,
          geodesic: true,
          strokeColor: '#FF0000',
          strokeOpacity: 1.0,
          strokeWeight: 2
        });
 
 flightPath.setMap(map);
};
 
initialize();
</script>

Ce qui donne:
Nom : maps2.jpg
Affichages : 596
Taille : 169,2 Ko

**Celira** · 14/06/2018, 11h53

J'ai trouvé le problème. Dans ton 1er foreach, tu écrases la variable $data :

Code :

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

1
2
3
foreach($data['data'] as $reg){
// [..]
        $data= $reg['data'];  //frame data

Donc, dans ton 2e foreach $data ne contient plus les données reçues en entrée, mais uniquement celle de la dernière ligne. Attention aux noms de variables

Ensuite, comme tu fais déjà les calculs pour afficher ton tableau, tu peux réutiliser les valeurs calculées.

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
// tableau pour l'alimentation des coordonnées
    $coords = [];
 
    foreach($data['data'] as $reg){
      //print_r($data);
    ?>
    <tr>
        <td><?php echo $reg['device'];?></td>
        <td><?php echo date(DATE_RFC2822, $reg['time']);?></td>
 
        <td><?php 
        $str_data= $reg['data'];  //frame data
        echo $str_data;
        ?></td>
        <td><?php
        $lat_str = substr($str_data, 0, 6); //6 premiers caracteres
        $lat_int = hexdec($lat_str); //conversion hexa -> decimal
        $lat_result = $lat_int/(float)(0xFFFFFF/360.0)-180; //conversion, precision
        echo $lat_result; 
        ?></td>
 
        <td><?php
        $long_str = substr($str_data, 6, 6);
        $long_int = hexdec($long_str);
        $long_result = $long_int/(float)(0xFFFFFF/180.0)-90; //conversion, precision
        echo $long_result;
 
        // [...]
 
        ?>
 
        </td>
    </tr>
    <?php
    $coord[] = ['lat' => $lat_result, 'long' => $long_result];
     }

que tu utilise ensuite avec

Code :

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

1
2
3
4
5
6
7
8
9
10
var flightPlanCoordinates = [
        <?php
        foreach($coords as $coord_ligne){
        ?>
          {lat: <?php echo $coord_ligne['lat']; ?>, lng: <?php echo $coord_ligne['long']; ?>},  //coordonnees 
        <?php
          }  
        ?>
        {lat: <?php echo $current_lat_result; ?>, lng: <?php echo $current_long_result; ?>} //coordonnee actuelle (derniere coordonnee du tableau)
        ];

[PHP, JS] Tracer des lignes avec l'API Google maps

Langage PHP

Vue hybride

Discussions similaires

Partager

Partager