Discussion :

[clemissile]

Salut à tous,

Dans le cadre d'un cours, je dois créer une application qui sert à afficher des parcours de randonnée (pédestre, VTT ou à cheval) sur une carte. Nous est fourni un fichier XML, et nous devons l'utiliser pour en extraire les informations utiles à la carte. J'ai donc affiché sur cette carte des markers et infobulles. Ces dernières contiennent une rapide description et un lien "Voir les détails". Voici une capture d'écran de ce que ça donne :



La suite du projet était d'afficher un parcours détaillé à l'aide d'un bouton, comme le montre la capture d'écran ci-dessous :



Dernière partie du projet : effectuer une recherche Flickr qui donne des images dans un rayon de 10 km autour du départ de la randonnée.
Et c'est la que commence les problèmes, dans ma fonction searchFlickr(pos) l'argument pos n'a pas la même valeur avant la fonction (de type (latitude, longitude)) et lors de l'alert(pos) que j'effectue dans la fonction, l'alert m'affiche uniquement la longitude. Je ne comprends vraiment pas comment j'obtiens un tel résultat. Voici la partie de mon code qui pose problème :

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
// Fonction qui récupère tout les points d'un tracé
function getCourse(name) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'gps/'+name, true);
  xhr.onload = function() {
   var doc = xhr.responseXML;
   var elements = doc.getElementsByTagName('trkpt')
   var allPos = new Array();
   for (var i = 0; i < elements.length; i++) {
    var lat = elements[i].getAttribute("lat"); // On récupère la latitude
    var lon = elements[i].getAttribute("lon"); // Et la longitude
 
    var point = new google.maps.LatLng(parseFloat(lat), parseFloat(lon));
 
    allPos.push(point);
   };
 
   var course = createCourse(allPos);
  }
  xhr.send(null);
}
 
// Fonction qui trace le parcours et effectue les modifications (zoom, zone de détails)
function createCourse(pos) {
  var course = new google.maps.Polyline({
    path: pos,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });
 
  // On trace et on zomm sur l'élement
  course.setMap(map);
  map.setCenter(pos[0]);
  map.setZoom(12);
 
  alert(pos[0]);
 
  // Suppression du button "Afficher le parcours détaillé"
  b = document.getElementById('details').lastElementChild;
  document.getElementById('details').removeChild(b);
 
  //Ajout des boutons "Revenir à la carte complète" et "Trouver des images dans cette zone"
  document.getElementById('details').innerHTML += '<button onclick="initialize()">Revenir à la carte complète</button> <button onclick="searchFlickr('+ pos[0] +')">Trouver des images dans cette zone</button>'
}
 
// Fonction qui effectue la recherche Flickr et l'affiche
function searchFlickr(pos) {
  alert(pos);
 
  document.getElementById('details').innerHTML = '';
 
  var url = 'https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=15d482f51e1b194f29bb84d130e2d4f2&lat=' + pos + '&lon=' + pos + '&radius=10&radius_units=km&per_page=5&format=rest';
 
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.onload = function() {
    var doc = xhr.responseXML;
    photo = doc.getElementsByTagName('photo')
    // http://farm{id}.static.flickr.com/{server-id}/{id}_{secret}_[mstb].jpg
    for (var i = 0; i < photo.length; i++) {
      p_url = "http://farm" + photo[i].getAttribute('farm') + ".static.flickr.com/" + photo[i].getAttribute('server') + "/" + photo[i].getAttribute('id') + "_" + photo[i].getAttribute('secret') + "_" + "t.jpg";
      document.getElementById('details').innerHTML += '<img style="display: inline-block; padding: 5px;" src="' + p_url + '"/>';
    };
  //Ajout du bouton "Revenir à la carte complète"
  document.getElementById('details').innerHTML += '<button style="display: block;" onclick="initialize()">Revenir à la carte complète</button>';
  }
  xhr.send(null);
 
}
 
window.onload = initialize;

Un autre problème (moins important) est que j'ai besoin de cliquer deux fois sur le bouton "Afficher le parcours détaillé" pour qu'il s'affiche.
J'espère avoir été clair, et si quelqu'un peut avoir une piste ou une solution, je suis preneur!

Cordialement,
Clemissile