Tracer plusieurs trajets avec progression

**Fredd30** · 27/04/2013, 20h13

Bonjour à tous,

Passionné d'aviation je "bloque" sur un script qui trace un trajet par exemple
de LFPG-LFML (pour le premier joueur)
de KJFK-LFPG (pour le second joueur)

Les trajets s'affichent correctement mais lorsque je veux tracer une polyline de deux couleurs pour visualiser la progression les polylines se croisent en gros c'est du n'importe quoi

je vous donne le lien du script javascript (extension txt restriction de sécurité du serveur de jeux)

la map http://fshost.p3d-simulation.fr:3031
le script http://fshost.p3d-simulation.fr:3031/user1000.txt

Ma question comment faire des tracés corrects avec plusieurs joueurs SVP.

Je bloque je n'avance plus, je me tourne donc vers des pros. Merci par avance

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
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
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
var refreshRate = seconds*500;
var overlays = [];
 var LatLine = [];
 var LonLine = [];
/**
 * clearOverlays
 */
/*function clearOverlays(){
  while(overlays[0]){
    overlays.pop().setMap(null);
  }
  totalBounds = new google.maps.LatLngBounds();
  infoWindow.close();
}
*/
 
/************************************************************/
 
function LierMarqueurEtInfoWindow(iMarker, iInfoWindow)
  {
   google.maps.event.addListener(iMarker, "mouseover", function(){iInfoWindow.open(MYMAP.map, iMarker);});
   google.maps.event.addListener(iMarker, "mouseout", function(){iInfoWindow.close();});
   google.maps.event.addListener(iMarker, "mouseover", function(){MYMAP.map.panTo(iMarker.getPosition());});
   }
 
 function LierMarqueurEtInfoWindowarr(iMarkerarr, iInfoWindowarr)
  {
   google.maps.event.addListener(iMarkerarr, "mouseover", function(){iInfoWindowarr.open(MYMAP.map, iMarkerarr);});
   google.maps.event.addListener(iMarkerarr, "mouseout", function(){iInfoWindowarr.close();});
  google.maps.event.addListener(iMarkerarr, "mouseover", function(){MYMAP.map.panTo(iMarkerarr.getPosition());});
   google.maps.event.addListener(iMarkerarr, "mouseout", function(){iInfoWindowarr.close();});
   }
 
 function readLatLon(sWert, sPlus) {
    var nDegrees, nHours, nSign;
    var sClean;
    var nTemp;
 
    sClean = sWert;
    sClean = sClean.replace("&amp;#176;", "");
    sClean = sClean.replace("°", "");
    sClean = sClean.replace("Â°", "");
    if (sClean.isEmpty) return 0;
 
    if (sClean.substr(0,1) == sPlus) nSign=1; else nSign=-1;
    sClean = sClean.substr(1, sClean.length-1);
    nTemp = sClean.indexOf(" ");
    if (nTemp>0) {
      nDegrees = parseFloat(sClean.substr(0,nTemp));
      nHours = parseFloat(sClean.substr(nTemp, sClean.length-nTemp));
      return (nDegrees + (nHours / 60.0))*nSign;
    } else return 0;
  }
 
function clearMarkers() {
    for(var i = 0; i < markers.length; i++) {
          if (markers[i]) {
            markers[i].setMap(null);
          }
    }
}
 
 
function stripChars(vars,start, num){
    out = vars.substring(start,vars.length-num);
    return out;
}
 
function timedRefresh(timeoutPeriod) {
  setTimeout("location.reload(true);",timeoutPeriod);
}
 
var markers = new Array();
 
 
$(document).ready(function () {
    $('#wc').css({
        'font-variant':'small-caps',
        'font-family':'impact, sans-serif',
        'font-style':'italic',
        'font-size':'48px'
    }).fadeTo('slow','0.9');
    $('textarea').addClass('ui-corner-all');
    //$('#logo').wrap('<h6><div id="author"><a href="http://www.basisten.se/e107_pages/hoplist_creator/"><div class="rk">&copy;Robert Andersson<br/>Make your own hoplists</h6></div></a></div>');
    $('#author').css({
        'position':'fixed',
        'bottom':'8px',
        'right':'8px',
        'z-index':'2',
        'float':'right'
    });
 
$('#author').hover(
function(){
  $(this).stop().animate({'bottom': '+=4px'}, 'slow');
},
function(){
  $(this).stop().animate({'bottom': '8px'}, 'slow');
});
 
    $('.left,.right').css({'padding':'6px','margin-bottom':'12px'}).addClass('ui-corner-all');
 
$('#author .rk').button({icons: {primary: 'ui-icon-heart',secondary: 'ui-icon-extlink'}}).fadeTo('3000','0.5');
    $('button').button({icons: {  primary: 'ui-icon-refresh'}});
    $('.a').button({icons: {  primary: 'ui-icon-notice'}});
    $('.b').button({icons: {  primary: 'ui-icon-clipboard'}});
    $('.c').button({icons: {  primary: 'ui-icon-help'}});
    $('a[href^="http"]').attr('target','_blank');
 
$('.pilots').ajaxSuccess(function() {
 
var icons = {
      header: "ui-icon-circle-plus",
      headerSelected: "ui-icon-circle-arrow-s"
    };
    $("#accordion").accordion({
        collapsible: true,
        icons:icons,
        active: 2,
        animated: 'easeOutExpo',
        clearStyle: true,
        header: 'h4'
        });
 
$('tbody tr, a').hover(
function(){
  $(this).stop().animate({'opacity': '0.5'}, 'slow');
},
function(){
  $(this).stop().animate({'opacity': '1'}, 'slow');
});
 
    $('.pilots tr:odd, .FlightPlans tr:odd').addClass(' ui-state-highlight');
    $('.pilots tr:even, .FlightPlans tr:odd').addClass(' ui-widget-content');
    $('.pil thead, .flp thead').addClass('ui-widget-header');
    $('.pil td, .flp td').addClass('lrborder');
    //$('table').css('border', 'none');
    $('.pil thead tr td, #accordion .flp thead tr td').addClass('ui-corner-top');
    $('.pil tbody tr:last td, #accordion .flp tbody tr:last td').addClass('ui-corner-bottom');
 
    $('thead tr').addClass('ui-corner-left');
});
 
  var myLatLng = new google.maps.LatLng(43.6350000277162, 1.36777773499489);
  MYMAP.init('#map', myLatLng, 2);
 
    updateXml();
 
 
 
});
 
var theFinalCountdown;
function clearingTimer(){
    clearTimeout(theFinalCountdown);
	updateXml();
 
    //clearOverlays();
}
function updateXml() {
     $.ajax({
        type: "GET",
        url: url,
        dataType: "xml",
        cache: false,
        success: xmlParser
    });
      //trajet.setMYMAP.map(null);
     theFinalCountdown = setTimeout('updateXml()', refreshRate);
     removem();
/*     points.setMap(null);
     points_1.setMap(null);
     points_2.setMap(null);
     trajet_2.setMap(null);*/
   }
 
var MYMAP = {
    map: null,
  bounds: null
}
 
MYMAP.init = function(selector, latLng, zoom) {
 
  var myOptions = {
    zoom: 5,
   // icon: image,
   //latLng : (43.6350000277162, 1.36777773499489),
    center: latLng,
    navigationControl: false,
     mapTypeControl: false,
     streetViewControl: false,
     scaleControl: true,
     maxZoom: 50,
     title: "Hub Toulouse-Blagnac",
    mapTypeId: google.maps.MapTypeId.SATELLITE
  }
 
    this.map = new google.maps.Map($(selector)[0], myOptions);
  	this.bounds = new google.maps.LatLngBounds();
 
var flightPlanCoordinates = [new google.maps.LatLng(45.7255556434393, 5.08111104369164), new google.maps.LatLng(48.3537835255265, 11.7860859632492), new google.maps.LatLng(50.0333056971431, 8.57045531272888), new google.maps.LatLng(48.7233332544565, 2.37944439053535), new google.maps.LatLng(49.0097224339843, 2.54777759313583), new google.maps.LatLng(50.5633333325386, 3.08694452047348), new google.maps.LatLng(48.4472222998738, -4.42166671156883), new google.maps.LatLng(43.6350000277162, 1.36777773499489), new google.maps.LatLng(43.4366667643189, 5.2149997651577), new google.maps.LatLng(43.6652778089046, 7.21500009298325), new google.maps.LatLng(45.7255556434393, 5.08111104369164)];
    var flightPath = new google.maps.Polyline(
  {
    path: flightPlanCoordinates,
    strokeColor: '#C151C7',
    strokeOpacity: 5.0,
    strokeWeight: 1,
    clickable: true,
    geodesic: true,
    zIndex: 2
  });
var weatherLayer = new google.maps.weather.WeatherLayer({
temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS
});
weatherLayer.setMap(MYMAP.map);
 
var cloudLayer = new google.maps.weather.CloudLayer();
cloudLayer.setMap(MYMAP.map);
 
flightPath.setMap(MYMAP.map); //-> add it to the map
}
 
function xmlParser(xml) {
 
    var counter = 0;
 
 
        var ServerName = $(xml).find("ServerName").text();
        var ServerURL = $(xml).find("ServerURL").text();
        var Version = $(xml).find("Version").text();
        var ServerRunTime = $(xml).find("ServerRunTime").text();
        var CurrentTime = $(xml).find("CurrentTime").text();
        var CurrentDate = $(xml).find("CurrentDate").text();
        var IPAddress = $(xml).find("IPAddress").text();
        var SessionName = $(xml).find("SessionName").text();
        var SessionComments = $(xml).find("SessionComments").text();
        var PasswordRequired = $(xml).find("PasswordRequired").text();
        var DirectXVersionRequired = $(xml).find("DirectXVersionRequired").text();
        var CurrentPilots = $(xml).find("CurrentPilots").text();
        var MaxPilots = $(xml).find("MaxPilots").text();
        var CurrentObservers = $(xml).find("CurrentObservers").text();
        var MaxObservers = $(xml).find("MaxObservers").text();
        var NumFlightPlans = $(xml).find("NumFlightPlans").text();
        var WeatherDescription = $(xml).find("WeatherDescription").text();
        var WeatherRequired = $(xml).find("WeatherRequired").text();
 
 
//SessionComments = SessionComments.replace(/\n/gi, "<br />");
 
 
        $('.ServerName').html(ServerName);
        $('.Version').html(Version);
        $('.ServerRunTime').html(ServerRunTime);
        $('.CurrentTime').html(CurrentTime);
        $('.CurrentDate').html(CurrentDate);
        $('.SessionName').html(SessionName);
        $('.SessionComments').html(SessionComments);
        $('.PasswordRequired').html(PasswordRequired);
        $('.CurrentPilots').html(CurrentPilots);
        $('.MaxPilots').html(MaxPilots);
        $('.CurrentObservers').html(CurrentObservers);
        $('.MaxObservers').html(MaxObservers);
        $('.WeatherDescription').html(WeatherDescription);
        $('.WeatherRequired').html(WeatherRequired);
 
        $(".numberOfPilots").html(CurrentPilots);
if((CurrentPilots!=0)&&(CurrentPilots>1)){
    theEss='s';
}else{
    theEss='';
}
$(".lastEss").html(theEss);
 
 
  /*************************************************/
  clearMarkers();
  var barName = new Array;
  var barAlt = new Array;
  $(".pilots").empty();
  $(".radars").empty();
 
 
   // [Min, Max]
   var PilotName = new Array();
   var PilotAltitude = new Array();
   var PilotSpeed = new Array();
   var PilotDataRate = new Array();
 
 
   var indexNum = new Array();
   var flightPlanCoordinates = []; 
 
 
 $(xml).find("Player").each(function players(idx) {
    var Name = $(this).find("Name").text();
    var LatencyText = $(this).find("LatencyText").text();
    var GameVersion = $(this).find("GameVersion").text();
    var Type = $(this).find("Type").text();
    var Aircraft = $(this).find("Aircraft").text();
    var ConnectTime = $(this).find("ConnectTime").text();
    var NearAirport = $(this).find("NearAirport").text();
    var NearDistance = $(this).find("NearDistance").text();
    var Altitude = stripChars($(this).find("Altitude").text(),0,1);
    var Heading = stripChars($(this).find("Heading").text(),0,1);
    var Speed = stripChars($(this).find("Speed").text(),0,4);
    var Hop = $(this).find("Hop").text();
    var DataRate = $(this).find("DataRate").text();
    var Status = $(this).find("Status").text();
    var Latitude = $(this).find("Latitude").text();
    var Longitude = $(this).find("Longitude").text();
    var myLat = readLatLon(Latitude, "N");
    var myLon = readLatLon(Longitude, "E");
    var theTitle = "HUB AÃ©roport Toulouse-Blagnac";
    var icon0 = "http://www.serveur-perso.net/fshost/images/POI_sol.png";
    var point0 = new google.maps.LatLng(43.6350000277162,1.36777773499489);
    var marker = new google.maps.Marker({position: point0,title: theTitle,flat:false,icon: icon0,map: MYMAP.map });
    google.maps.event.addListener(marker, "click", function(){MYMAP.map.panTo(marker.getPosition());}) 
 
LatLine[idx] = myLat;
LonLine[idx] = myLon;
 
  PilotName.push(Name);
  PilotAltitude.push(Altitude);
  PilotSpeed.push(Speed);
  PilotDataRate.push(DataRate);
 
  indexNum.push(idx);
 
function fnSetRotation(obj, deg)
{
 
  rad = deg * deg2radians;
  costheta = Math.cos(rad);
  sintheta = Math.sin(rad);
 
  a = parseFloat(costheta).toFixed(8);
  c = parseFloat(-sintheta).toFixed(8);
  b = parseFloat(sintheta).toFixed(8);
  d = parseFloat(costheta).toFixed(8);
 
  if (obj.filters) {
      obj.filters.item(0).M11 = costheta;
      obj.filters.item(0).M12 = -sintheta;
      obj.filters.item(0).M21 = sintheta;
      obj.filters.item(0).M22 = costheta;
  } else {
    obj.setAttribute("style", "position:absolute; -moz-transform:  matrix(" + a + ", " + b + ", " + c + ", " + d + ", 0, 0); -webkit-transform:  matrix(" + a + ", " + b + ", " + c + ", " + d + ", 0, 0); -o-transform:  matrix(" + a + ", " + b + ", " + c + ", " + d + ", 0, 0);");
  }
}
 
function roundNumber(num, dec) {
  var result = Math.round(num*Math.pow(10,dec))/Math.pow(10,dec);
  return result;
}
function clearMarkers() {
  for (var i = 0; i < markers.length; i++) {
    if (markers[i]) {
      markers[i].setMap(null);
    }
  }
}
 
function IconPixels(deg) {
  deg2rad = deg / (180 / Math.PI);
  newP = Math.sin(deg2rad*2);
  if  ((deg >= '091' && deg <= '180') || (deg >= '271' && deg <= '360')) {
    newP = newP * -1;
  }
  newPixelSize = Math.round(32 + (14 * newP));
  return newPixelSize;
}
 
var marker = [];
function createMarker(latlng,title,icon) {
    var marker = new google.maps.Marker({
           position: point,
            title: theTitle,
            icon: theImage,
            flat:true,
            map: MYMAP.map
        });
 
}
 
 
if((Type=='Pilot')&&(Heading !='')){
      barName[counter] = Name;
      barAlt[counter] = Altitude;
           if(Status==="Flying"){icon = "http://www.serveur-perso.net/fshost/images/appareil_vol.png";}
             else if ((Status==="Parked")&&(Speed>1)){icon = "http://www.serveur-perso.net/fshost/images/appareil_taxi.png";}
             else if (Status==="Pause"){icon = "http://www.serveur-perso.net/fshost/images/appareil_pause.png";}
             else {icon = "http://www.serveur-perso.net/fshost/images/appareil_resting.png";}
             var theTitle = "Pilot: "+Name + " :: Speed: " +Speed+" kts :: Alt: "+Altitude+" ft.";
             var theTitle = "Pilot: "+Name + "\nHop: " + Hop + "\nSpeed: " + Speed + " kts\nAlt: " + Altitude + " ft.";
      var iconSize = parseFloat(IconPixels(Heading));
      var theImage =
      new google.maps.MarkerImage(icon, // icon
      new google.maps.Size(iconSize, iconSize), // size
      new google.maps.Point(0,0), // origin
      new google.maps.Point(roundNumber(iconSize/2,0),roundNumber(iconSize/2,0)));
      // anchor
 
      var point = new google.maps.LatLng(parseFloat(myLat),parseFloat(myLon));
      //alert(marker.getPosition());
      // extend the bounds to include the new point
      //MYMAP.bounds.extend(point);
      var marker = new google.maps.Marker( {
            position: point,
            title: theTitle,
            icon: theImage,
            flat:true,
            map: MYMAP.map
      }
 
      );
/*var markersArray = [];
          function colorline() { 
      downloadUrl("xml", function(data) {
      var markers = data.documentElement.getElementsByTagName("Players");
      for (var j = 0; j < markers.length; j++) {
        var point = new google.maps.LatLng(
              parseFloat(markers[j].getAttribute("Latitude")),
              parseFloat(markers[j].getAttribute("Longitude")));
            var myLat = readLatLon(Latitude, "N");
            var myLon = readLatLon(Longitude, "E");
            var point = new google.maps.LatLng(
            parseFloat(markers[j].myLat), 
            parseFloat(markers[j].myLon));
              line.push(point);
              alert(point);
        }
    
    //Draw Polyline following markers     
    var flightPatha = new google.maps.Polyline({
      path: line,
      strokeColor: "#0033FF",
      strokeOpacity: 0.5,
      strokeWeight: 10
  });
  
  var flightPath = new google.maps.Polyline({
      path: line,
      strokeColor: "#FF0000",
      strokeOpacity: 0.75,
      strokeWeight: 4
  });
 
      flightPatha.setMap(MYMAP.map);
      flightPath.setMap(MYMAP.map); 
      
      });
    };  
 
<!---------------------------------------------------------------
 
<!--------------------------------------------------------------- */
  function removem() {
    if (trajet_) {
      for (i in trajet_) {
      trajet_[i].setMap(null);
      }
      trajet_.length = 0;
    }
  };
 
           //
 
    $(xml).find("FlightPlan").each(function(){
 
      var lPlan = $.trim($(this).find('Plan').text());
 
      if(lPlan != "")
      {
        var lElements = lPlan.split(" ");
        for(var lI in lElements)
        {
          if(lElements[lI].indexOf("-") != -1)
          {
            var lDepart = lElements[lI].split("-")[0];
            var lArrivee = lElements[lI].split("-")[1];
            break;
          }
        }
 
                   //alert(lDepart);
                   //alert(lArrivee);
 
 
      $.ajax({
            url: "http://www.serveur-perso.net/fshost/scripts/getOaci.php",
            crossDomain : true,
            dataType: "xml",
            type: "post",
            data: {oaci1: lDepart, oaci2: lArrivee},
            success: function(iXml){
              $(iXml).find("flight").each(function(){
 
				var points= [];
				var points_1= [];
				var points_2= [];
 
                //Progresiion
                LatLine[idx] = myLat;
                LonLine[idx] = myLon;
 
 
                var lPosition1 = new google.maps.LatLng(parseFloat($(this).attr("depart_lat")),parseFloat($(this).attr("depart_lon")));
                var lPosition2 = new google.maps.LatLng(parseFloat($(this).attr("arrivee_lat")),parseFloat($(this).attr("arrivee_lon")));
				        var lPosition_ac = new google.maps.LatLng(myLat,myLon);
 
 
				//alert(+lPosition_ac);
				points.push(lPosition1, lPosition_ac);
				points_1.push(lPosition_ac, lPosition2);
				points_2.push(lPosition1, lPosition2);
                //Progresiion
 
              // crÃ©ation des markers
              var lMarker = new google.maps.Marker({map: MYMAP.map, position: lPosition1, clickable: true, flat: true, zIndex: 30, icon:"http://www.serveur-perso.net/fshost/images/POI_DEP"});
              var lInfoWindow = new google.maps.InfoWindow({content: "AÃ©roport de : <span style=\"color: #FF0000\">"  +$(this).attr("depart_nom") +"</span><br />" +"ICAO :"  +lDepart +"<br />"+ "Pays : " +$(this).attr("depart_pays") +"<br />"+ "Altitude : "+$(this).attr("depart_alt")+" pieds" , disableAutoPan: false});
 
 
 
                LierMarqueurEtInfoWindow(lMarker, lInfoWindow);
 
               var lMarkerarr = new google.maps.Marker({map: MYMAP.map, position: lPosition2, clickable: true, flat: true, zIndex: 30, icon:"http://www.serveur-perso.net/fshost/images/POI_ARR"});
               var lInfoWindowarr = new google.maps.InfoWindow({content: "AÃ©roport de : <span style=\"color: #00AC00\">" +$(this).attr("arrivee_nom") +"</span><br />" +"ICAO :"   +lArrivee +"<br />"+ "Pays : " +$(this).attr("arrivee_pays") +"<br />"+ "Altitude : "+$(this).attr("arrivee_alt")+" pieds" , disableAutoPan: false});
                LierMarqueurEtInfoWindowarr(lMarkerarr, lInfoWindowarr);
 
 
                //var trajet = [];
                //var trajet_1 = [];
 
 
 
               //var trajet = new google.maps.Polyline({map: MYMAP.map, path: points, strokeColor: "#FF0000", strokeOpacity: 2.0, strokeWeight: 1.5, geodesic: true, clickable: true, zIndex: 20});
               //var trajet_1 = new google.maps.Polyline({map: MYMAP.map, path: points_1, strokeColor: "#00AC00", strokeOpacity: 2.0, strokeWeight: 1.5, geodesic: true, clickable: true, zIndex: 20});
				      var trajet_2 = new google.maps.Polyline({map: MYMAP.map, path: points_2, strokeColor: "#00AC00", strokeOpacity: 2.0, strokeWeight: 1.5, geodesic: true, clickable: true, zIndex: 20});
 
 
 
 
                //trajet.setMap(MYMAP.map);
                //trajet_1.setMap(MYMAP.map);
                //trajet_2.setMap(MYMAP.map);
                //update = setTimeout('updateXml()', refreshRate);
                //setTimeout('location.reload()', 100000);
 
             });
            }
          });
 
      }
      else
      {
        var lDepart = "";
        var lArrivee = "";
 
        //removem();
      }
 
      //colorline();
 
 
    });
 
//
 
      var infoWindow = new google.maps.InfoWindow();
      var html='<table class="bubble ui-widget-content ui-corner-all" style="height:150px; width:320px">'
                            +'<thead><tr><th colspan="2" class="ui-widget-header ui-corner-top">'+Name+'</th></tr></thead>'
                            +'<tbody>'
              +'<tr><td>Aircraft:</td><td>'+Aircraft+'</td></tr>'
              +'<tr><td>Altitude:</td><td>'+Altitude+' ft.</td></tr>'
              +'<tr><td>Heading:</td><td>'+Heading+'&deg;</td></tr>'
              +'<tr><td>Speed:</td><td>'+Speed+' kts.</td></tr>'
              +'</tbody>'
              +'</table>';
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(MYMAP.map, marker);
        MYMAP.map.panTo(iMarqueur.getPosition());
      });
      markers[counter] = marker;
            counter++;
            nearInfo = NearAirport+' '+NearDistance;
 
}
        $(".pilots").append(
        '<tr>'
        +'<td>' + GameVersion + '</td>'
        +'<td>' + Name + '</td>'
        +'<td>' + Aircraft + '</td>'
        +'<td>' + ConnectTime + '</td>'
        +'<td>' + nearInfo +'</td>'
        +'<td>' + Altitude + '</td>'
        +'<td>' + Heading + '</td>'
        +'<td>' + Speed + '</td>'
        +'<td>' + Hop + '</td>'
        +'<td>' + DataRate + '</td>'
        +'<td>' + Status + '</td></tr>'
        );
});
 
 
$(".FlightPlans").empty();
    $(xml).find("FlightPlan").each(function () {
        var StatusText = $(this).find("StatusText").text();
        var PlayerName = $(this).find("PlayerName").text();
        var TimeFiledText = $(this).find("TimeFiledText").text();
        var TimeOpenedText = $(this).find("TimeOpenedText").text();
        var TimeClosedText = $(this).find("TimeClosedText").text();
        var TimeOpened = $(this).find("TimeOpened").text();
        var TimeClosed = $(this).find("TimeClosed").text();
        var OpenTimeText = $(this).find("OpenTimeText").text();
        var FlightPlanStatus = $(this).find("FlightPlanStatus").text();
        var Plan = $(this).find("Plan").text();
 
 
if(StatusText==="Closed"){
    var strip1 = FlightPlanStatus.replace(/<img src="\/flight_plan_closed.gif" align=absmiddle width=14 height=14 title="/, "");
    var strip2 = strip1.replace(/">/, "");
    var titleText = strip2;
    // clearOverlays();
 
}else{
    var titleText = "Flight Plan: "+StatusText;
 
}
 
$(".FlightPlans").append(
        '<tr class="ui-widget-content">'
            +'<td class="center lrborder" rowspan="2"><img src="http://i586.photobucket.com/albums/ss305/robFSX/FSHost/'+StatusText+'.png" width="30px" height="30px" alt="'+StatusText+'" title="'+titleText+'" /></td>'
            +'<td class="lrborder" rowspan="2">'+PlayerName+'</td>'
            +'<td class="center lrborder">&nbsp;&nbsp;'+TimeFiledText+'&nbsp;&nbsp;</td>'
            +'<td class="center lrborder">&nbsp;&nbsp;'+TimeOpenedText+'&nbsp;&nbsp;</td>'
            +'<td class="center lrborder">&nbsp;&nbsp;'+TimeClosedText+'&nbsp;&nbsp;</td>'
            +'<td class="center lrborder">&nbsp;&nbsp;'+OpenTimeText+'&nbsp;&nbsp;</td>'
        +'</tr>'
        +'<tr class="ui-widget-content">'
            +'<td class="data lrborder" colspan=4><b>'+Plan+'</b></td>'
        +'</tr>'
        );
        });
 
}

Edit: Je sais que le code est très mal structuré, je ne sais pas si je me suis fait comprendre mais j'espère avoir donné toutes les infos nécessaires

**Fredd30** · 29/04/2013, 08h22

Ok,

Je vais essayer d'expliquer autrement. Normalement un joueur dépose un plan de vol avec un point de départ (A) et un point d'arriver (B).
Donc chaque polylines du trajet sont tracées séparément c'est le cas maintenant.

Le Problème vient lorsque je veux tracer une polyline avec deux couleurs toujours du point (A) au point (B). Lorsqu'il n'y a q'un joueur pas de problème , mais lorsqu'un autre joueur se connecte la polyline précédemment dessinée passe par le nouveau marker du joueur B.

Ce qui donne (A) et (C) et (B)

La variable ou le marker en commun est (myLat, myLon)

Comment faire pour indexer chaque marker d'avion qui est (myLat, myLon) et chaque départ et arrivée ?

Exemple concret ici: http://www.vafinancials.com/v5/maps/flightmap.php

**NoSmoking** · 29/04/2013, 16h21

Bonjour,
chaque polyLine ne peut posséder qu'une couleur, si tu veux simuler plusieurs couleurs il te faut créer un tabPolyLine, par exemple, ou tu pourra définir chaque polyLine différemment avec une seule contrainte la fin de la 1st polyLine correspondant au début de la polyLine suivante etc...

Mais ai je bien compris le problème?

**Fredd30** · 29/04/2013, 17h54

Merci pour ta réponse NoSmoking (j'attendais en fait une réponse de ta part au vu des résultats)

Pour revenir au sujet, j'ai réussi partiellement à faire une polyline à deux couleurs, certes avec un refresh (10s) car on voit chaque tracé donc au bout d'un moment il y en a beaucoup.

Mes problèmes avec le "code fournit"

1) le marker avion est toujours par défaut à (0,0) dès que l'on se connecte au serveur

2) avec fonction progression deux couleurs les polylines se superposent & si plus d'une personne est connectée, la polyline passe par le point de départ ( A) puis (0,0) puis le point d'arrivée (B) ce que je ne veux pas.

Je ne sais pas si je suis assez clair

**NoSmoking** · 29/04/2013, 23h13

1) le marker avion est toujours par défaut à (0,0) dès que l'on se connecte au serveur

dans ce cas il faut sauvegarder la position en cours.

2) avec fonction progression deux couleurs les polylines se superposent & si plus d'une personne est connectée, la polyline passe par le point de départ ( A) puis (0,0) puis le point d'arrivée (B) ce que je ne veux pas.

là j'ai du mal à saisir, mais il faut dire que je n'ai pas franchement tout regardé

**Fredd30** · 30/04/2013, 01h42

Envoyé par NoSmoking

dans ce cas il faut sauvegarder la position en cours.

Justement le simulateur n'est pas lancé donc par défaut le script le place sur (0,0) après avoir parser le xml http://fshost.p3d-simulation.fr:3031/xml

Le mieux serait qu'il n'y ai pas de marker tant que le parsing ne trouve pas de Longitude & de Latitude (mais je suis novice voir inculte dans ce type de script)

Envoyé par NoSmoking

là j'ai du mal à saisir, mais il faut dire que je n'ai pas franchement tout regardé

Pas de soucis

Lorsque par exemple deux plans de vols sont déposés (avec le mode progression décommentée, toutes les polylines (rouge) passent par tous les points de départs de même pour les arrivées (vert)

Comment faire en script pour indexer chaque départ & chaque arrivée par joueurs ainsi je pense que pour chaque path les polylines ne se croiseront plus

**NoSmoking** · 30/04/2013, 17h05

Le mieux serait qu'il n'y ai pas de marker tant que le parsing ne trouve pas de Longitude & de Latitude

tu n'a qu'à affecter ton marqueur qu’une fois le fichier lu.

Lorsque par exemple deux plans de vols sont déposés (avec le mode progression décommentée, toutes les polylines (rouge) passent par tous les points de départs de même pour les arrivées (vert)

Il faut que tu ais autant de polyLine que tu as de plan de vol.

Il te faut peut être revoir la structure de tes données.

**Fredd30** · 30/04/2013, 17h22

Ok Peux-tu m'aider au vu du code que je t'ai "donné" stp ?

**NoSmoking** · 03/05/2013, 10h31

Je peux tout au plus te donner quelques conseils.
- factorise ton code pour une meilleur lisibilité, des fonctione sont redondantes, des bouts de code sont identiques.
- lorsque tu recharges le fichier des datas n'intervient pas sur la carte mais uniquement sur ces données qui se mettront à jour toutes seules, la modification d'un point d'une polyLine et prise en compte au changement sans aucune autre action.

**Fredd30** · 03/05/2013, 19h26

Merci de prendre le temps pour me donner des conseils

Cependant comme je te l'ai dit je ne maitrise pas du tout ce code, et la fonction dessiner polyline à été rajouté après...

Les bouts de codes restant c'est pour essayer de faire une boucle sur les id des players pour récupérer la Lat, Lon de chaque players et là j'ai besoin d'aide

Pour nettoyer le code alors là.... sachant que j'ai rajouté des fonctions depuis

http://fshost.p3d-simulation.fr:3031/User1.html

**NoSmoking** · 12/05/2013, 19h18

Un petit exemple concernant la récupération de l'image suivant l'orientation de l'avion, plutôt que de mettre 70 ligne de if, plusieurs fois dans ton code.

Code :

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

1
2
3
4
5
6
7
function getIcone( val){
  var valeur = val *2;
  var modulo = valeur %10;
  valeur -= modulo;
  valeur /= 2;
  return imgloc +valeur +'' + (valeur +4) +'.png';
}

avec un appel

Code :

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

1
2
var hdg = $(this).find("heading").text();
var image = getIcone( hdg);

idem pour d'autres lignes de code, en général lorsque l'on écrit deux fois la même chose il peut être intéressant de factoriser et/ou de créer une fonction.

**Fredd30** · 15/05/2013, 18h37

Je te remercie je vais essayer de l'implanter ou tout reprendre de A-Z

Peux tu aussi me donner 2 fonctions pour initialiser proprement l'API google MAP et aussi une fonction parser ? STP

PS: Je sais j'abuse

**NoSmoking** · 15/05/2013, 22h49

PS: Je sais j'abuse

mets la main à la pâte et en cas de problème on sera encore là pour te dépanner

.

**Fredd30** · 16/05/2013, 17h09

Envoyé par NoSmoking

Un petit exemple concernant la récupération de l'image suivant l'orientation de l'avion, plutôt que de mettre 70 ligne de if, plusieurs fois dans ton code.

Code :

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

1
2
3
4
5
6
7
function getIcone( val){
  var valeur = val *2;
  var modulo = valeur %10;
  valeur -= modulo;
  valeur /= 2;
  return imgloc +valeur +'' + (valeur +4) +'.png';
}

la variable imgloc n'est pas définit c'est normal un oubli ? ou je ne comprends pas?

dans l'exemple de mon script il y a 4 types d'icônes différentes d'où les "if"

**NoSmoking** · 16/05/2013, 18h43

la variable imgloc n'est pas définit c'est normal un oubli ? ou je ne comprends pas?

lorsque j'ai parcouru le fichier source, http://www.vafinancials.com/v5/maps/js/flightmap.js, on voit que cette variable est déclarée en début de fichier, c'est pour cette raison que je ne l'ai pas, pour l'exemple, passé en paramètre.

Tu peux tout à fait concevoir, si tu as plusieurs chemins possibles, de la passer en paramètre

Code :

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

1
2
3
4
5
6
7
function getIcone( val, chemin){
  var valeur = val *2;
  var modulo = valeur %10;
  valeur -= modulo;
  valeur /= 2;
  return chemin +valeur +'' + (valeur +4) +'.png';
}

avec un appel du style

Code :

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

1
2
var hdg = $(this).find("heading").text();
var image = getIcone( hdg, imgloc);

**Fredd30** · 18/05/2013, 10h25

Oui, alors on ne parle pas du même fichier, flightmap.js c'était un exemple

le fichier en question http://fshost.p3d-simulation.fr:3031/user1000.txt

**NoSmoking** · 18/05/2013, 11h58

Oui, alors on ne parle pas du même fichier, flightmap.js c'était un exemple]

oui je penses qu'il y a eu confusion de ma part

.

**Fredd30** · 31/05/2013, 08h22

Me revoilà, nosmoking, désolé pour le retard, mais concours à réviser.

bref, j'ai un nouveau système je te donne le code

1) tjs la même question comment faire lorsque l'on click sur l'avion que dans la même polyline le trajet déjà effectué en vert et ce qu'il reste à faire en rouge.

2) comment faire pour faire un refresh assez rapide sans que l'objet en question clignote sans cesse et rende inopérant l'event (popup).

le code

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
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
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
var flightMarkers = [];
var routeMarkers = [];
var flightPath = null;
var depMarker = null, arrMarker = null;
var info_window= null;
var run_once = true;
var mapOptions = {
	autozoom: true,
	center: new google.maps.LatLng(46.5,6),
	zoom:4,
	navigationControl:false,
	streetViewControl:false,
	mapTypeId: google.maps.MapTypeId.SATELLITE };
var map = new google.maps.Map(document.getElementById("acarsmap"), mapOptions);
var weatherLayer = new google.maps.weather.WeatherLayer({ temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS }); weatherLayer.setMap(map);
var cloudLayer = new google.maps.weather.CloudLayer(); cloudLayer.setMap(null)
setWindSpeed(google.maps.weather.WindSpeedUnit.KILOMETERS_PER_HOUR)  
var defaultOptions = {
	autozoom: true,
	zoom:4,
	navigationControl:false,
	streetViewControl:false,
	mapTypeId: google.maps.MapTypeId.SATELLITE,
	refreshTime: 10,
	autorefresh: true
};
         function toggleClouds() {
         cloudLayer.setMap(cloudLayer.getMap() ? null : map);
         }
         function toggleIcons() {
         weatherLayer.setMap(weatherLayer.getMap() ? null : map);
         }
         function setWindSpeed(units) {
         weatherLayer.setOptions({'windSpeedUnits': units});
         }
var options = $.extend({}, defaultOptions, acars_map_defaults);
//var map = new google.maps.Map(document.getElementById("acarsmap"), options);
 
// They clicked the map
google.maps.event.addListener(map, 'click', function()
{
	//clearPreviousMarkers();
});
 
liveRefresh();
if(options.autorefresh == true)
{
	setInterval(function () { liveRefresh(); }, options.refreshTime);
}
 
function liveRefresh()
{
	$.ajax({
		type: "GET",
		url: url + "/action.php/acars/data",
		dataType: "json",
		cache: false,
		success: function(data) 
		{
			populateMap(data);
		}
	});
};
 
function populateMap(data)
{
	clearMap();
	$("#pilotlist").html("");
 
	if (data.length == 0) {
		return false;
	}
 
	var lat, lng;
	var details, row, pilotlink;
	var bounds = new google.maps.LatLngBounds();
 
	for (var i = 0; i < data.length; i++) 
	{
		if(data[i] == null || data[i].lat == null || data[i].lng == null
			|| data[i].lat == "" || data[i].lng == "") {
			continue;
		}
 
		lat = data[i].lat;
		lng = data[i].lng;
 
		if(i%2 == 0)
			data[i].trclass = "even";
		else
			data[i].trclass = "odd";
 
		// Pull ze templates!
		var map_row = tmpl("acars_map_row", {flight: data[i]});
		var detailed_bubble = tmpl("acars_map_bubble", {flight: data[i]});
 
		$('#pilotlist').append(map_row);
 
			if((data[i].gs==="0")&&(data[i].alt==="0")){var icon = url+"lib/images/resting/appareil_resting"+data[i].heading+".png";}
			else if ((data[i].gs>"1")&&(data[i].alt==="0")){var icon = url+"/lib/images/taxi/appareil_taxi"+data[i].heading+".png";}
			else if (data[i].phasedetail==="Paused"){var icon = url+"/lib/images/pause/appareil_pause"+data[i].heading+".png";}
			else {var icon = url+"/lib/images/envol/appareil_vol"+data[i].heading+".png";}
 
		var pos = new google.maps.LatLng(lat, lng);
		flightMarkers[flightMarkers.length] = new google.maps.Marker({
			position: pos,
			map: map,
			icon :icon,
			//icon: url+"/lib/images/inair/"+data[i].heading+".png",
			flightdetails: data[i],
			infowindow_content: detailed_bubble
		});
 
		bounds.extend(pos);
 
		google.maps.event.addListener(flightMarkers[flightMarkers.length - 1], 'click', function() 
		{
			clearPreviousMarkers();
 
			var focus_bounds = new google.maps.LatLngBounds();
			// Flight details info window
			info_window = new google.maps.InfoWindow({ 
				content: this.infowindow_content,
				position: this.position
			});
 
			info_window.open(map, this);
 
			// Add polyline, and start/end points
			var pos_actuel = new google.maps.LatLng(this.flightdetails.lat, this.flightdetails.deplng);
			var dep_location = new google.maps.LatLng(this.flightdetails.deplat, this.flightdetails.deplng);
			var arr_location = new google.maps.LatLng(this.flightdetails.arrlat, this.flightdetails.arrlng);
 
			depMarker = new google.maps.Marker({
				position: dep_location,
				map: map,
				icon: depicon,
				title: this.flightdetails.depname,
				zIndex: 100
			});
 
			arrMarker = new google.maps.Marker({
				position: arr_location,
				map: map,
				icon: arricon,
				title: this.flightdetails.arrname,
				zIndex: 100
			});
 
			// Now the flight path, if it exists
			var path = new Array();
			path[path.length] = dep_location;
			focus_bounds.extend(dep_location);
			// if(this.flightdetails.route_details.length > 0) {
				$.each(this.flightdetails.route_details, function(i, nav)
				{
					var loc = new google.maps.LatLng(nav.lat, nav.lng);
 
					if(nav.type === 3)
						icon = "icon_vor.png";
					else
						icon = "icon_fix.png";
 
					var navpoint_info = tmpl("navpoint_bubble", {nav: nav});
					routeMarkers[routeMarkers.length] = new google.maps.Marker({
						position: loc,
						map: map,
						icon: url + "/lib/images/"+icon,
						title: nav.title,
						zIndex: 100,
						infowindow_content: navpoint_info
					});
 
					google.maps.event.addListener(routeMarkers[routeMarkers.length - 1], 'click', function() 
					{
						info_window = new google.maps.InfoWindow({ 
							content: this.infowindow_content,
							position: this.position
						});
 
						info_window.open(map, this);
					});
 
					path[path.length] = loc;
					focus_bounds.extend(loc);
				});
			//}
 
			path[path.length] = arr_location;
			focus_bounds.extend(this.position);
			focus_bounds.extend(arr_location);
 
			flightPath = new google.maps.Polyline({
				path: path,
				strokeColor: "#00AC00", strokeOpacity: 1.0, strokeWeight: 1.5, geodesic: true
			});
 
			map.fitBounds(focus_bounds); 
			flightPath.setMap(map);
		});
	}
 
	// If they selected autozoom, only do the zoom first time
	if(options.autozoom == true && run_once == false)
	{
		map.fitBounds(bounds); 
		run_once = true;
	}
}
 
function clearPreviousMarkers()
{
	if(info_window)
	{
		info_window.close();
		info_window = null;
	}
 
	if(depMarker != null)
	{
		depMarker.setMap(null);
		depMarker = null;
	}
 
	if(arrMarker != null)
	{
		arrMarker.setMap(null);
		arrMarker = null;
	}
 
	if(routeMarkers.length > 0)
	{
		for(var i = 0; i < routeMarkers.length; i++) {
			routeMarkers[i].setMap(null);
		}
	}
 
	routeMarkers.length = 0;
 
	if(flightPath != null)
	{
		flightPath.setMap(null);
		flightPath = null;
	}
}
 
function clearMap()
{
	if(flightMarkers.length > 0)
	{
		for(var i = 0; i < flightMarkers.length; i++) {
			flightMarkers[i].setMap(null);
		}
	}
 
	flightMarkers.length = 0;
 
	if(routeMarkers.length > 0)
	{
		for(var i = 0; i < routeMarkers.length; i++) {
			routeMarkers[i].setMap(null);
		}
	}
 
	routeMarkers.length = 0;
}

le lien: http://phpvms.p3d-simulation.fr/index.php/acars

**NoSmoking** · 01/06/2013, 11h58

1) tjs la même question comment faire lorsque l'on click sur l'avion que dans la même polyline le trajet déjà effectué en vert et ce qu'il reste à faire en rouge.

sur ce point je t’ai donné une amorce de réponse que je vais compléter par deux exemples sur la même base

exemple 1: Trajet connu, on connait les points d'avance

Code html :

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
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>[Google Maps API]Affichage d'un trajet connu</title>
<meta name="Author" content="NoSmoking">
<style type="text/css">
html, body {
  margin:1em 0;
  padding:0;
  font-family:Verdana,sans-serif;
  font-size:1em;
}
#page {
  position:relative;
  width:800px;
  padding:0;
  margin:0 auto;
  background-color:#FFF;
  border: 1px solid #B0B0FF;
  box-shadow: 0px 0px 5px 2px #C0C0C0;
  overflow:hidden;
}
#page h3 {
  color:#4488bb;
  color:#006699;
  font-size:1.0em;
  margin:1em 0 0.5em;
  text-shadow: 1px 1px 10px #808080;
}
#header{
  margin:1px;
  background-color:#E1E4F2;
}
#header h1{
  color:#006699;
  font-size:1.5em;
  font-style:normal;
  margin:0;
  padding:0.5em;
  text-shadow:1px 1px 0px #FFF;
}
#header span {
  float: right;
  font-size: 0.5em;
  font-style: italic;
}
.section{
  margin: 2em 2em;
}
.cadre_carte{
  width:700px;
  height:600px;
  margin:0 auto;
  padding:5px;
  border-radius:5px;
  border:1px solid #CCC;
  box-shadow: 0 2px 4px 2px #CCC;
}
#div_carte{
  height:100%;
  width:100%;
  z-index:1;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initCarte(){
  var tPosition = [
      { 'lat':48.90109200399041, 'lon':2.3572094778320434},
      { 'lat':48.89996355650762, 'lon':2.3918850759765746},
      { 'lat':48.88529142073465, 'lon':2.3973782400390746},
      { 'lat':48.87987292830054, 'lon':2.4066479543945434},
      { 'lat':48.87174408891387, 'lon':2.4135144094726684},
      { 'lat':48.85412707199129, 'lon':2.4138577322265746},
      { 'lat':48.847123714948886, 'lon':2.414201054980481},
      { 'lat':48.834244018018936, 'lon':2.4121411184570434},
      { 'lat':48.829046009477324, 'lon':2.400468144824231},
      { 'lat':48.82633379093924, 'lon':2.389481816699231},
      { 'lat':48.82045681382785, 'lon':2.3778088430664184},
      { 'lat':48.815935593243395, 'lon':2.3630459646484496},
      { 'lat':48.815935593243395, 'lon':2.356522832324231},
      { 'lat':48.81797019297125, 'lon':2.352402959277356},
      { 'lat':48.81638773365275, 'lon':2.345879826953137},
      { 'lat':48.817065936620516, 'lon':2.3354084829589965},
      { 'lat':48.81853534490713, 'lon':2.333348546435559},
      { 'lat':48.82735089009425, 'lon':2.2930081228515746},
      { 'lat':48.835147964455714, 'lon':2.2736103872558715},
      { 'lat':48.83480898645335, 'lon':2.2609074453613403},
      { 'lat':48.83706879647763, 'lon':2.255242619921887},
      { 'lat':48.84023235925237, 'lon':2.253526006152356},
      { 'lat':48.845429207206244, 'lon':2.255070958544934},
      { 'lat':48.850173684392736, 'lon':2.2519810537597778},
      { 'lat':48.85356232144678, 'lon':2.2533543447754028},
      { 'lat':48.85920954021081, 'lon':2.261937413623059},
      { 'lat':48.86225877345302, 'lon':2.2643406729004028},
      { 'lat':48.87117953712866, 'lon':2.273095403125012},
      { 'lat':48.87558287211646, 'lon':2.277043614794934},
      { 'lat':48.877953738121306, 'lon':2.2803051809570434},
      { 'lat':48.882695133030396, 'lon':2.2830517629882934},
      { 'lat':48.888113319711934, 'lon':2.2916348318359496},
      { 'lat':48.88856480877048, 'lon':2.2945530752441528},
      { 'lat':48.892063710752296, 'lon':2.301934514453137},
      { 'lat':48.89544951180082, 'lon':2.307256017138684},
      { 'lat':48.90018924804242, 'lon':2.3216755728027465},
      { 'lat':48.90109200399041, 'lon':2.3572094778320434}
  ];
 
  // mets les donnees au format new google.maps.LatLng
  function convertArray( tabVal){
    var i, nb, oLatLng = [];
    for( i =0, nb = tabVal.length; i <nb; i++){
      oLatLng[i] = new google.maps.LatLng( tabVal[i].lat, tabVal[i].lon);
    }
    return oLatLng;
  }
  // déplace le marker et modifie la polyline trajet
  function movePositionMarker( marker, encours, restant){
    if( restant.getPath().length >1){
      // suppression du 1st point
      restant.getPath().removeAt(0);
      // récup le point en cours
      var point = restant.getPath().getAt(0);
      // déplace le marker
      marker.setPosition( point);
      // ajout point dans polyline encours
      encours.getPath().push( point);
      // rappel de la fonction
      window.setTimeout( function(){
          movePositionMarker( marker, encours, restant);
        }, 500);
    }
    // stoppe animation en fin de datas
    else{
      document.getElementById('info').innerHTML = 'D&eacute;placement termin&eacute;...';
    }
  }
  // initialisation de la carte
  var oPath, oMap,
      oMarkerEnCours,
      oPolylineEnCours, oPolylineRestant;
  // recup des point de l'itinéraire
  oPath = convertArray( tPosition);
  // creation de la carte
  oMap = new google.maps.Map(document.getElementById("div_carte"),{
      'backgroundColor': '#FFF',
      'mapTypeControl':  false,
      'streetViewControl': false,
      'panControl':false,
      'zoomControlOptions': {
        'style': google.maps.ZoomControlStyle.SMALL
      },
      'zoom': 12,
      'center': new google.maps.LatLng( 48.8568, 2.3442),
      //48.85680712742, 2.344119873046897
      'mapTypeId': google.maps.MapTypeId.ROADMAP
    });
  // creation du marqueur arrivée
  oMarkerArrive = new google.maps.Marker({
      'position':oPath[oPath.length-1],
      'zIndex':0,
      'icon':'http://labs.google.com/ridefinder/images/mm_20_red.png',
      'shadow':{
        'url': 'http://labs.google.com/ridefinder/images/mm_20_shadow.png',
        'size': new google.maps.Size(22, 20),
        'origin': new google.maps.Point(0,0),
        'anchor': new google.maps.Point(6, 20)
      },
      'map': oMap
    });
 
  // creation du marqueur trajet
  oMarkerEnCours = new google.maps.Marker({
      'position':oPath[0],
      'zIndex':1,
      'icon':'http://maps.google.com/mapfiles/ms/micons/cabs.png',
      'shadow':{
        'url': 'http://maps.google.com/mapfiles/ms/micons/cabs.shadow.png',
        'size': new google.maps.Size(59, 32),
        'origin': new google.maps.Point(0,0),
        'anchor': new google.maps.Point(0, 32)
      },
      'map': oMap
    });
  // creation de la polyline restant à faire
  oPolylineRestant = new google.maps.Polyline({
      'path' : oPath,
      'zIndex':1,
      'map': oMap,
      'strokeColor': "#FF0000",
      'strokeOpacity': 0.6,
      'strokeWeight': 5
    });
  // creation de la polyline encours
  oPolylineEnCours = new google.maps.Polyline({
      'path' : [oPath[0]],
      'zIndex':2,
      'map': oMap,
      'strokeColor': "#00FF00",
      'strokeOpacity': 0.6,
      'strokeWeight': 5
    });
  // lance l'animation sur click marqueur
  google.maps.event.addListenerOnce(oMarkerEnCours, 'click', function(){
      document.getElementById('info').innerHTML = 'D&eacute;placement en cours...';
      movePositionMarker( this, oPolylineEnCours, oPolylineRestant);
    });
}
// init lorsque la page est chargee
google.maps.event.addDomListener(window, 'load', initCarte);
</script>
</head>
<body>
<div id="page">
  <div id="header">
    <h1><span>[Google Maps API]</span>Affichage d'un trajet connu</h1>
  </div>
  <div class="section">
    <p id="info">Cliquez sur le marker pour lancer le d&eacute;placement.</p>
    <h3>Plan de ciculation</h3>
    <div class="cadre_carte">
      <div id="div_carte"></div>
    </div>
  </div>
</div>
</body>
</html>

exemple 2: Trajet dynamique, on ne connait que le début et la fin

Code html :

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>[Google Maps API]Affichage d'un trajet dynamique</title>
<meta name="Author" content="NoSmoking">
<style type="text/css">
html, body {
  margin:1em 0;
  padding:0;
  font-family:Verdana,sans-serif;
  font-size:1em;
}
#page {
  position:relative;
  width:800px;
  padding:0;
  margin:0 auto;
  background-color:#FFF;
  border: 1px solid #B0B0FF;
  box-shadow: 0px 0px 5px 2px #C0C0C0;
  overflow:hidden;
}
#page h3 {
  color:#4488bb;
  color:#006699;
  font-size:1.0em;
  margin:1em 0 0.5em;
  text-shadow: 1px 1px 10px #808080;
}
#header{
  margin:1px;
  background-color:#E1E4F2;
}
#header h1{
  color:#006699;
  font-size:1.5em;
  font-style:normal;
  margin:0;
  padding:0.5em;
  text-shadow:1px 1px 0px #FFF;
}
#header span {
  float: right;
  font-size: 0.5em;
  font-style: italic;
}
.section{
  margin: 2em 2em;
}
.cadre_carte{
  width:700px;
  height:600px;
  margin:0 auto;
  padding:5px;
  border-radius:5px;
  border:1px solid #CCC;
  box-shadow: 0 2px 4px 2px #CCC;
}
#div_carte{
  height:100%;
  width:100%;
  z-index:1;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initCarte(){
  var tPosition = [
    { 'lat' :43.297612, 'lon' : 5.381042, 'title' :'Marseille'},
    { 'lat' :48.856667, 'lon' : 2.350987, 'title' :'Paris'}
  ];
 
  // mets les donnees au format new google.maps.LatLng
  function convertArray( tabVal){
    var i, nb, oLatLng = [];
    for( i =0, nb = tabVal.length; i <nb; i++){
      oLatLng[i] = new google.maps.LatLng( tabVal[i].lat, tabVal[i].lon);
    }
    return oLatLng;
  }
  //
  function movePositionMarker( latlng, marker, encours, restant){
    // déplace le point
    marker.setPosition( latlng);
    // ajout info position
    marker.setTitle( 'Position actuelle :\n' +latlng.toUrlValue());
    // ajout du point au trajet
    encours.getPath().push( latlng);
    // suppression du 1st
    restant.getPath().removeAt(0);
    // insertion du point qui va devenir le 1st
    restant.getPath().insertAt(0, latlng);
 
  }
  // initialisation de la carte
  var oPath, oMap,
      oMarkerArrive, oMarkerEnCours,
      oPolylineEnCours, oPolylineRestant,
      eventAddPoint;
  // recup des point de l'itinéraire
  oPath = convertArray( tPosition);
  // creation de la carte
  oMap = new google.maps.Map(document.getElementById("div_carte"),{
      'backgroundColor': '#FFF',
      'mapTypeControl':  false,
      'streetViewControl': false,
      'panControl':false,
      'zoomControlOptions': {
        'style': google.maps.ZoomControlStyle.SMALL
      },
      'zoom': 6,
      'center': new google.maps.LatLng( 46.80, 1.70),
      'mapTypeId': google.maps.MapTypeId.ROADMAP
    });
  // creation du marqueur arrivée
  oMarkerArrive = new google.maps.Marker({
      'position':oPath[oPath.length-1],
      'icon':'http://labs.google.com/ridefinder/images/mm_20_green.png',
      'shadow':{
        'url': 'http://labs.google.com/ridefinder/images/mm_20_shadow.png',
        'size': new google.maps.Size(22, 20),
        'origin': new google.maps.Point(0,0),
        'anchor': new google.maps.Point(6, 20)
      },
      'title':'Fin du voyage',
      'map': oMap
    });
 
  // creation du marqueur trajet
  oMarkerEnCours = new google.maps.Marker({
      'position':oPath[0],
      'icon':'http://maps.google.com/mapfiles/ms/micons/plane.png',
      'shadow':{
        'url': 'http://maps.google.com/mapfiles/ms/micons/plane.shadow.png',
        'size': new google.maps.Size(59, 32),
        'origin': new google.maps.Point(0,0),
        'anchor': new google.maps.Point(0, 32)
      },
      'map': oMap
    });
  // creation de la polyline restant à faire
  oPolylineRestant = new google.maps.Polyline({
      'path' : oPath,
      'zIndex':1,
      'map': oMap,
      'strokeColor': "#FF0000",
      'strokeOpacity': 0.6,
      'strokeWeight': 5
    });
  // creation de la polyline trajet
  oPolylineEnCours = new google.maps.Polyline({
      'path' : [oPath[0]],
      'zIndex':2,
      'map': oMap,
      'strokeColor': "#00FF00",
      'strokeOpacity': 0.6,
      'strokeWeight': 5
    });
  // gestion déplacement marker
  eventAddPoint = new google.maps.event.addListener( oMap, 'click', function(data){
      movePositionMarker( data.latLng, oMarkerEnCours, oPolylineEnCours, oPolylineRestant);
    });
  // transfert les evenements a la map
  google.maps.event.addListener( oPolylineRestant, 'click', function( data){
    google.maps.event.trigger( this.getMap(), 'click', data);
  });
  // fin du parcours
  google.maps.event.addListener( oMarkerArrive, 'click', function(){
      movePositionMarker( oPath[1], oMarkerEnCours, oPolylineEnCours, oPolylineRestant);
      document.getElementById('info').innerHTML = 'D&eacute;placement termin&eacute;...';
      google.maps.event.removeListener( eventAddPoint);
    });
}
// init lorsque la page est chargee
google.maps.event.addDomListener(window, 'load', initCarte);
</script>
</head>
<body>
<div id="page">
  <div id="header">
    <h1><span>[Google Maps API]</span>Affichage d'un trajet dynamique</h1>
  </div>
  <div class="section">
    <p id="info">Cliquez sur la carte pour d&eacute;placer le marker.</p>
    <h3>Plan de vol</h3>
    <div class="cadre_carte">
      <div id="div_carte"></div>
    </div>
  </div>
</div>
</body>
</html>

Voila à toi de voir ce que tu peux en faire.

**Fredd30** · 02/06/2013, 12h44

Merci Nosmoking,

Tu sais que tu me parle en Chinois

Je ne vois pas comment je vais intégrer ça là dedans :

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
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
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
/**
 * phpVMS - Virtual Airline Administration Software
 * Copyright (c) 2008 Nabeel Shahzad
 * For more information, visit www.phpvms.net
 *	Forums: http://www.phpvms.net/forum
 *	Documentation: http://www.phpvms.net/docs
 *
 * phpVMS is licenced under the following license:
 *   Creative Commons Attribution Non-commercial Share Alike (by-nc-sa)
 *   View license.txt in the root, or visit http://creativecommons.org/licenses/by-nc-sa/3.0/
 *
 * @author Nabeel Shahzad
 * @copyright Copyright (c) 2008, Nabeel Shahzad
 * @link http://www.phpvms.net
 * @license http://creativecommons.org/licenses/by-nc-sa/3.0/
 *
 * Rewritten for Google Maps v3
 */
 
var flightMarkers = [];
var routeMarkers = [];
var flightPath = null;
var depMarker = null, arrMarker = null;
var info_window= null;
var run_once = false;
var mapOptions = {
	//autozoom: true,
	center: new google.maps.LatLng(46.5,6),
	zoom:4,
	navigationControl:false,
	streetViewControl:false,
	mapTypeId: google.maps.MapTypeId.SATELLITE };
var map = new google.maps.Map(document.getElementById("acarsmap"), mapOptions);
var weatherLayer = new google.maps.weather.WeatherLayer({ temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS }); weatherLayer.setMap(map);
var cloudLayer = new google.maps.weather.CloudLayer(); cloudLayer.setMap(null)
setWindSpeed(google.maps.weather.WindSpeedUnit.KILOMETERS_PER_HOUR)  
var defaultOptions = {
	autozoom: true,
	//zoom:4,
	navigationControl:false,
	streetViewControl:false,
	mapTypeId: google.maps.MapTypeId.SATELLITE,
	refreshTime: 10,
	autorefresh: true
};
         function toggleClouds() {
         cloudLayer.setMap(cloudLayer.getMap() ? null : map);
         }
         function toggleIcons() {
         weatherLayer.setMap(weatherLayer.getMap() ? null : map);
         }
         function setWindSpeed(units) {
         weatherLayer.setOptions({'windSpeedUnits': units});
         }
var options = $.extend({}, defaultOptions, acars_map_defaults);
//var map = new google.maps.Map(document.getElementById("acarsmap"), options);
 
// They clicked the map
google.maps.event.addListener(map, 'click', function()
{
	//clearPreviousMarkers();
});
 
liveRefresh();
if(options.autorefresh == true)
{
	setInterval(function () { liveRefresh(); }, options.refreshTime);
}
 
function liveRefresh()
{
	$.ajax({
		type: "GET",
		url: url + "/action.php/acars/data",
		dataType: "json",
		cache: false,
		success: function(data) 
		{
			populateMap(data);
		}
	});
};
 
function populateMap(data)
{
	clearMap();
	$("#pilotlist").html("");
 
	if (data.length == 0) {
		return false;
	}
 
	var lat, lng;
	var details, row, pilotlink;
	var bounds = new google.maps.LatLngBounds();
 
	for (var i = 0; i < data.length; i++) 
	{
		if(data[i] == null || data[i].lat == null || data[i].lng == null
			|| data[i].lat == "" || data[i].lng == "") {
			continue;
		}
 
		lat = data[i].lat;
		lng = data[i].lng;
 
		if(i%2 == 0)
			data[i].trclass = "even";
		else
			data[i].trclass = "odd";
 
		// Pull ze templates!
		var map_row = tmpl("acars_map_row", {flight: data[i]});
		var detailed_bubble = tmpl("acars_map_bubble", {flight: data[i]});
 
		$('#pilotlist').append(map_row);
 
			if((data[i].gs==="0")&&(data[i].alt==="0")){var icon = url+"lib/images/resting/appareil_resting"+data[i].heading+".png";}
			else if ((data[i].gs>"1")&&(data[i].alt==="0")){var icon = url+"/lib/images/taxi/appareil_taxi"+data[i].heading+".png";}
			else if (data[i].phasedetail==="Paused"){var icon = url+"/lib/images/pause/appareil_pause"+data[i].heading+".png";}
			else {var icon = url+"/lib/images/envol/appareil_vol"+data[i].heading+".png";}
 
		var pos = new google.maps.LatLng(lat, lng);
		flightMarkers[flightMarkers.length] = new google.maps.Marker({
			position: pos,
			map: map,
			icon :icon,
			//icon: url+"/lib/images/inair/"+data[i].heading+".png",
			flightdetails: data[i],
			infowindow_content: detailed_bubble
		});
 
		bounds.extend(pos);
 
		google.maps.event.addListener(flightMarkers[flightMarkers.length - 1], 'click', function() 
		{
			clearPreviousMarkers();
 
			var focus_bounds = new google.maps.LatLngBounds();
			// Flight details info window
			info_window = new google.maps.InfoWindow({ 
				content: this.infowindow_content,
				position: this.position,
				title: this.pilotename
			});
 
			info_window.open(map, this);
 
			// Add polyline, and start/end points
			//var pos_actuel = new google.maps.LatLng(this.flightdetails.lat, this.flightdetails.deplng);
			var dep_location = new google.maps.LatLng(this.flightdetails.deplat, this.flightdetails.deplng);
			var arr_location = new google.maps.LatLng(this.flightdetails.arrlat, this.flightdetails.arrlng);
 
			depMarker = new google.maps.Marker({
				position: dep_location,
				map: map,
				icon: depicon,
				title: this.flightdetails.depname,
				zIndex: 100
			});
 
			arrMarker = new google.maps.Marker({
				position: arr_location,
				map: map,
				icon: arricon,
				title: this.flightdetails.arrname,
				zIndex: 100
			});
 
			// Now the flight path, if it exists
			var path = new Array();
			path[path.length] = dep_location;
			focus_bounds.extend(dep_location);
			// if(this.flightdetails.route_details.length > 0) {
				$.each(this.flightdetails.route_details, function(i, nav)
				{
					var loc = new google.maps.LatLng(nav.lat, nav.lng);
 
					if(nav.type == 3)
						icon = "icon_vor.png";
					else
						icon = "icon_fix.png";
 
					var navpoint_info = tmpl("navpoint_bubble", {nav: nav});
					routeMarkers[routeMarkers.length] = new google.maps.Marker({
						position: loc,
						map: map,
						icon: url + "/lib/images/"+icon,
						title: nav.title,
						zIndex: 100,
						infowindow_content: navpoint_info
					});
 
					google.maps.event.addListener(routeMarkers[routeMarkers.length - 1], 'click', function() 
					{
						info_window = new google.maps.InfoWindow({ 
							content: this.infowindow_content,
							position: this.position
						});
 
						info_window.open(map, this);
					});
					// Flight details info window
					//marker.setTitle( 'Position actuelle :\n' +this.pilotname);
 
					path[path.length] = loc;
					focus_bounds.extend(loc);
				});
			//}
 
			path[path.length] = arr_location;
			focus_bounds.extend(this.position);
			focus_bounds.extend(arr_location);
 
			flightPath = new google.maps.Polyline({
				path: path,
				strokeColor: "#00AC00", strokeOpacity: 1.0, strokeWeight: 1.5, geodesic: true
			});
 
			map.fitBounds(focus_bounds); 
			flightPath.setMap(map);
		});
	}
 
	// If they selected autozoom, only do the zoom first time
	if(options.autozoom == true && run_once == false)
	{
		map.fitBounds(bounds); 
		run_once = true;
	}
}
 
function clearPreviousMarkers()
{
	if(info_window)
	{
		info_window.close();
		info_window = null;
	}
 
	if(depMarker != null)
	{
		depMarker.setMap(null);
		depMarker = null;
	}
 
	if(arrMarker != null)
	{
		arrMarker.setMap(null);
		arrMarker = null;
	}
 
	if(routeMarkers.length > 0)
	{
		for(var i = 0; i < routeMarkers.length; i++) {
			routeMarkers[i].setMap(null);
		}
	}
 
	routeMarkers.length = 0;
 
	if(flightPath != null)
	{
		flightPath.setMap(null);
		flightPath = null;
	}
}
 
function clearMap()
{
	if(flightMarkers.length > 0)
	{
		for(var i = 0; i < flightMarkers.length; i++) {
			flightMarkers[i].setMap(null);
		}
	}
 
	flightMarkers.length = 0;
 
	if(routeMarkers.length > 0)
	{
		for(var i = 0; i < routeMarkers.length; i++) {
			routeMarkers[i].setMap(null);
		}
	}
 
	routeMarkers.length = 0;
}

Tracer plusieurs trajets avec progression

APIs Google

Discussions similaires

Partager

Partager