Information sur le Marker

**loribac** · 01/06/2013, 18h19

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 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
<?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

**loribac** · 01/06/2013, 22h34

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....

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
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
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>

**NoSmoking** · 02/06/2013, 08h56

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

http://javascript.developpez.com/faq...s/?page=Marker

Recherche la propriété title des marker.

**loribac** · 02/06/2013, 09h16

Bonjour NoSmoking,

Pas vu cette rubrique merci.

**loribac** · 02/06/2013, 09h29

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 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
<?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);
}  
?>

**NoSmoking** · 02/06/2013, 09h41

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

certes mais où les transmets tu coté client?

Code php :

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

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

en tout cas pas là!

**loribac** · 02/06/2013, 10h31

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 :

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

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

Resulta

Code :

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

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];

**NoSmoking** · 02/06/2013, 22h45

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 :

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

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 php :

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

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

et faire en sortie de boucle un

Code php :

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

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

**loribac** · 03/06/2013, 00h14

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 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
<?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 );
?>

**NoSmoking** · 03/06/2013, 18h54

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

**loribac** · 05/06/2013, 11h19

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 :

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

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
  });
}

**NoSmoking** · 05/06/2013, 19h52

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?

**loribac** · 05/06/2013, 22h56

"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...

**NoSmoking** · 06/06/2013, 22h30

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.

Envoyé par NoSmoking

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

???

**loribac** · 12/06/2013, 23h21

Une infobulle par bateaux

**NoSmoking** · 17/06/2013, 10h21

Tu as un code complet d'utilisation

Comment afficher une InfoWindow au-dessus des autres ?

**loribac** · 18/06/2013, 10h00

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

**NoSmoking** · 18/06/2013, 20h15

Les infos windows

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

Polyline

voir exemple concret sur ce forum

**loribac** · 18/06/2013, 23h46

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

**NoSmoking** · 19/06/2013, 22h45

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 :

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
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
    });
}

Information sur le Marker [Google Maps]

APIs Google

Discussions similaires

Partager

Partager