Information sur le Marker

Version imprimable

Bonjour ,

toujours dans le cadre de mon projet . Je souhaiterais que le visiteur puisse avoir des informations sur le Marker (qui représentent des bateaux dans mon cas )

voici le format du fichier TXT

26-05-2013,12:12:29,44.593768,-1.22868, bat1
31-05-2013,19:24:42,43.558622344591,4.0805150764906,bat2
00-00-0000,00:00:00,43.387304,4.809173,bat3
00-00-0000,12:12:29,46.145232,-1.167668,bat4

voici le script qui permet traiter avec explode les latitudes et longitudes. Je suis preneur de toutes suggestions.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
$indice = 0;
echo "var data = [];\n";  
$file = fopen( "fichierG.txt", "r");
if( $file){
  while( !feof( $file)){
    $buffer = fgets( $file);
    $buffer = preg_replace('/\r\n/', '', $buffer);
    $liste = explode(",", $buffer);    
    if( count( $liste) > 0){
      $lon = $liste[2];
      $lat = $liste[3];
      if( is_numeric( $lon) && is_numeric( $lat)){
        echo "data[", $indice ,"]=[", $lon , "," , $lat ,"];\n";
        $indice++; 
      }
    }  
  }
  fclose( $file);
}  
?>

Cordialement

Je réponds a moi même

J'ai dans le code toutes les données a exploiter

      $date = $liste[0];<---- la date
      $heure = $liste[1];<----- l'heure
      $lon = $liste[2];<-------- longitude
      $lat = $liste[3];<------ latitude
      $bat = $liste[4]<----- nom du bateau

Je n 'arrive pas a comprendre comme faire pour que ces informations date ,heure, et nom du bateau apparaisse au passage de la souris.

Cela se passe bien évidement ici mais comment ?? en V2 et php je sais faire mais pas la.... :calim2:

Code:

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
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
function initCarte() {
  var i, nb = data.length;
  var oMarker;
  var oMap = new google.maps.Map(document.getElementById('div_carte'),{
  'center': new google.maps.LatLng( 46.2,2),
      'zoom': 5,
      'backgroundColor': '#fff',
      'mapTypeId': google.maps.MapTypeId.HYBRID
    });
 
  for( i=0; i < nb; i++){
    oMarker = new google.maps.Marker({
        'map' : oMap,
        'position': new google.maps.LatLng( data[i][0], data[i][1])
      });  
  }  
}
// init lorsque la page est chargée
google.maps.event.addDomListener(window, 'load', initCarte);
</script>
</head>
<body>
  <div id="div_carte"></div>
</body>
</html>

02/06/2013, 08h56
NoSmoking

Bonjour,
avant d'utiliser des données coté client, il te faut les récupérer, ce que l'on ne voit pas dans ton code.

Ensuite, il y à la :faq: http://javascript.developpez.com/faq...s/?page=Marker

Recherche la propriété title des marker.
02/06/2013, 09h16
loribac

Bonjour NoSmoking,

Pas vu cette rubrique merci.

Pour répondre a ton interrogation je récupère les données comme ceci

FichierG.txt = 01-06-2013,20:49:30,44.663144,-1.151637,bat1,

Code:

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
<?php
$indice = 0;
echo "var data = [];\n";  
$file = fopen( "fichierG.txt", "r");
if( $file){
  while( !feof( $file)){
    $buffer = fgets( $file);
    $buffer = preg_replace('/\r\n/', '', $buffer);
    $liste = explode(",", $buffer);    
    if( count( $liste) > 0){
 
      $date = $liste[0];
      $heure = $liste[1];
      $lon = $liste[2];
      $lat = $liste[3];
      $bat = $liste[4];
 
      if( is_numeric( $lon) && is_numeric( $lat)){
        echo "data[", $indice ,"]=[", $lon , "," , $lat ,"];\n";
        $indice++; 
      }
    }  
  }
  fclose( $file);
}  
?>

02/06/2013, 09h41
NoSmoking

Citation:

Pour répondre a ton interrogation je récupère les données comme ceci

certes mais où les transmets tu coté client?

Code:

echo "data[", $indice ,"]=[", $lon , "," , $lat ,"];\n";

en tout cas pas là!

oui tu as raison

j 'ai essayé de passer les variables a cet emplacement du script mais cela plante le script ... dans mon tableau pourtant je retrouve bien dans ce cas le résulta de mes variables

Code:

echo "data[", $indice ,"]=[", $lon , "," , $lat ,"," , $bat ,"," , $date ,"," , $heure ,"];\n";

Resulta
Code:

1 2 3 4 5 var data = []; data[0]=[44.663144,-1.151637,L'OCCITAN,01-06-2013,20:49:30]; data[1]=[43.558622344591,4.0805150764906,ba1,31-05-2013,19:24:42]; data[2]=[43.387304,4.809173,bat2,00-00-0000,00:00:00]; data[3]=[46.145232,-1.167668,bat3,00-00-0000,12:12:29];

02/06/2013, 22h45
NoSmoking

Attention, comme le montre la coloration de code les apostrophes doivent se trouver entre guillemets pour ne pas planter le script.
Tu devrais obtenir

Code:

data[0]=[44.663144,-1.151637,"L'OCCITAN","01-06-2013","20:49:30"];

à mettre pour les autres paramètres qui sont de type chaine.

Tu pourrais également t'en sortir avec, dans ta boucle, une syntaxe du type

Code:

$tableau[] = array( $lon, $lat, $bat, $date, $heure);

et faire en sortie de boucle un

Code:

echo "data = " .json_encode($tableau );

bonsoir,

j 'ai suivi tes conseils avisés et cela fonction plus de plantage du script.
j 'en ai profité pour reformater les données c’était un gros Bor.....

BAT1,01-06-2013,20:49:30,44.663144,-1.151637,

Maitenant il faut que je trouve le moyens de passer les infos dans une infobulle ou juste dans le titre du marker .....
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <?php $indice = 0; echo "var data = [];\n"; $file = fopen( "fichierx.txt", "r"); if( $file){ while( !feof( $file)){ $buffer = fgets( $file); $buffer = preg_replace('/\r\n/', '', $buffer); $liste = explode(",", $buffer); if( count( $liste) > 0){ $bat = $liste[0]; $date = $liste[1]; $heure = $liste[2]; $lon = $liste[3]; $lat= $liste[4]; $tableau[] = array( $bat, $date, $heure, $lon, $lat); } } fclose( $file); } echo "data = " .json_encode($tableau ); ?>

03/06/2013, 18h54
NoSmoking

Il existe également http://javascript.developpez.com/faq...age=InfoWindow dans laquelle tu devrais trouver ton bonheur.

Bonjour me revoilou !

Alors, alors

Merci pour le tuto c'est génial

j 'ai complété le script comme cela et pourtant pas d'infobulle sur la carte

Je me pose aussi la question dois je refaire un boucle pour insérer mon infobulle ou l 'intégrer dans la première. comme cela ne marche pas je n'ai pas de réponse a cette question
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 for (i = 0; i < nb; i++) { oMarker = new google.maps.Marker({ 'map': oMap, 'position': new google.maps.LatLng(data[i][0], data[i][1]) }); } for (i = 0; i < nb; i++) { var oMaker = new google.maps.InfoWindow({ 'map': oMap, 'position': new google.maps.LatLng(data[i][0], data[i][1]) // position d'ancrage de l'InfoWondow sur la carte 'content': 'Le centre de la <b>TEST</b> n\'est pas loin !' // test }); }

05/06/2013, 19h52
NoSmoking

Citation:

j 'ai complété le script comme cela et pourtant pas d'infobulle sur la carte

de façon incomplète, il faut un événement pour déclencher l'ouverture de l'infoWindow.

Un question se pose qu'en même, une infoWondow commune à tous les markers, ou une infoWindow par marker?
05/06/2013, 22h56
loribac

"de façon incomplète, il faut un événement pour déclencher l'ouverture de l'infoWindow."

Je comprends et je fais des recherches

en réalité je voudrais passer les infos contenues dans mes variables , nom du bateaux , heure ect...
06/06/2013, 22h30
NoSmoking

Citation:

en réalité je voudrais passer les infos contenues dans mes variables , nom du bateaux , heure ect...

je pense que cela on l'avait bien compris ;)

Il te faut bien lire les exemple de la FAQ et notamment http://javascript.developpez.com/faq...indowAffichage, qui te donne la solution, ou pas loin.

Citation:

Envoyé par NoSmoking

Un question se pose qu'en même, une infoWondow commune à tous les markers, ou une infoWindow par marker?

???
12/06/2013, 23h21
loribac

Une infobulle par bateaux
17/06/2013, 10h21
NoSmoking

Tu as un code complet d'utilisation :fleche: Comment afficher une InfoWindow au-dessus des autres ?
18/06/2013, 10h00
loribac

Merci beaucoup,

Mais c'est trop compliqué pour moi la... Mon projet est juste a titre perso pour suivre mon petit bateau en mer donc la je suis un peu dépassé. en réalité avec votre aide je suis arrivé a 80% du projet

Il me manque

Les infos windows

Polyline

Un grand merci a tous et toutes
18/06/2013, 20h15
NoSmoking

Citation:

Les infos windows

qu'est ce que tu ne comprends pas, la faq m'a l'air pourtant très abordable :mrgreen:

Citation:

Polyline

voir exemple concret sur ce forum
18/06/2013, 23h46
loribac

Je suis tés admiratifs des pro du code j 'aurais tant aimer faire cela par moi même. Mais je dois avouée que je suis plus que pas bon ( je te rassure je suis meilleurs dans d'autre domaine)

Voici un exemple d'une petite croisière faites en 2011 ? C'est pas très beau ..
alors tu vas me dire qu'il existe des site qui font cela très bien ... oui mais moi je veux pas être dépendent de sites pro.. Je sais, je sais je suis difficile.
je ne trouve pas comment faire un trajet avec une polyligne colorée en rouge donc je vais me contenter de mes petits marker tout vilains

Mon voyage 2011

,http://www.maritime-position.fr/GPS/...s/laro2011.php

le lien que je t’ai indiqué contient toutes les informations nécessaires à la réalisation du tracé via une PolyLine.

exemple de ce que cela pourrait rendre

Code:

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
function initCarte(){
 
  var i, nb = data.length;
  var oMarker, oPolyline, oPath =[];
  var oMap = new google.maps.Map(document.getElementById('div_carte'),{
      'center': new google.maps.LatLng(46.07847,-1.218216),
      'zoom': 10,
      'backgroundColor': '#fff',
      'streetViewControl': false,
      'zoomControlOptions': {
        'style': google.maps.ZoomControlStyle.SMALL
      },
      'mapTypeId': google.maps.MapTypeId.ROADMAP
    });
  // on boucle sur les données
  for( i=0; i < nb; i++){
    // création du marker, optionnel
    oMarker = new google.maps.Marker({
        'map' : oMap,
        // icone personalisée
        'icon':{
          'path': google.maps.SymbolPath.CIRCLE,
          'fillColor': 'white',
          'fillOpacity': 0.5,
          'scale': 6,
          'strokeColor': 'red',
          'strokeWeight':1
        },
        'position': new google.maps.LatLng( data[i][0], data[i][1])
      });
     // stocke les donnees au format new google.maps.LatLng
     oPath.push( new google.maps.LatLng( data[i][0], data[i][1]));
  }
  // creation de la polyline trajet
  oPolyline = new google.maps.Polyline({
      'path' : oPath,
      'map': oMap,
      'strokeColor': "#FF0000",
      'strokeOpacity': 0.6,
      'strokeWeight': 3
    });
}

20/06/2013, 01h21
loribac

Bon que dire…. Merci beaucoup c’est trop beau….. C’est même parfait. J espère que la prog est ton métier car tu dois t’éclater:ccool: