Discussion :

[Azixp92]

Bonjour,

J'apprends actuellement le Javascript et j'essaie de créer une appli web qui propose aux utilisateurs une visualisation cartographique des parkings de Paris sous forme de markeurs. L'application simule une reservation de parking à l'unité ou forme d'abonnement. Quand l'utilisateur clique sur un markeur, une infobox apparait affichant les informations pertinentes du parking concerné (nom, adresse, tel, acces... etc)

Par conséquent, j'ai utilisé l'api de bing maps et des données json de l'opendata de la ville de Paris. Pour l'instant, j'ai pu récupérer les informations dont j'avais besoin dans le json et les afficher sous forme de markeur sur la carte. J'ai également réussi à lier chaque markeur à une infobox.

Là ou je bloque, c'est que je n'arrive pas à afficher toutes les infromations d'un parking dans l'infobox. D'après ma compréhension de la doc de bing maps, le "setOptions()" de l'infobox ne prend que deux proporiétés d'insertion(si on peut dire ça comme ça), c'est à dire une propriété "title" et un propriété "description".

https://docs.microsoft.com/en-us/bin...options-object

J'ai beau chercher, je n'arrive pas à faire en sorte d'afficher toutes les informations du parking dans l'infobox. je souhaiterais les afficher sous la forme suivante :

Nom : "nomparking"
Adresse : "adresse parking"
tel : "tel parking"
acces moto : "oui/non"
acces velo : "oui/non"
horaire : "horaire parking"

Est-ce qu'une âme charitable pourrait m'aider s'il vous plait ?

Je vous met ici mon 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
 
var url = 'https://opendata.paris.fr/api/records/1.0/search/?dataset=parcs-de-stationnement-concedes-de-la-ville-de-paris&rows=1000'
var tab = [];
 
// constructeur d'objet 
function parkingSpot(geo, name, adress, tel, time, motorBike, bike){
  this.geo = geo;
  this.name = name;
  this.adress = adress;
  this.telephone = tel;
  this.timeTable = time;
  this.motorBikeAcces = motorBike;
  this.bikeAcces = bike;
}
 
//Affiichage de la carte Bing Maps
function GetMap()
{
    var myOptions = {
        credentials: 'ApPosPKV1r####V9fpx_YULKyRhck#####Z2BT6XNNpeAC##UO7lN_m8L0Kp1e',
        center: new Microsoft.Maps.Location(48.8534, 2.3488),
        //mapTypeId: Microsoft.Maps.MapTypeId.aerial,
        zoom: 12
    }
    map = new Microsoft.Maps.Map('#myMap', myOptions);
 
    infobox = new Microsoft.Maps.Infobox(map.getCenter(), {
        visible: false
    });
 
    infobox.setMap(map);
}
 
/Requete http
var request = new XMLHttpRequest();
request.open('GET', url);
request.responseType = 'JSON';
request.send();
 
 
 
request.onload = function(){
 
  var req = JSON.parse(request.response);
 
//Récupération des informations du fichier json
  for (var i = 0; i < test.records.length; i++){
   tab.push(new parkingSpot(
   req.records[i].fields["geo_point_2d"],
   req.records[i].fields["nom_parc"],
   req.records[i].fields["adress_ssc"],
   req.records[i].fields["tel"],
   req.records[i].fields["horaire_na"],
   req.records[i].fields["acces_moto"],
   req.records[i].fields["acces_velo"]
    ));
  }
 
 
//Boucle permettant d'afficher les markeurs sur la carte
  for (var i = 0; i < tab.length; i++){
       center = new Microsoft.Maps.Location(tab[i].geo[0],tab[i].geo[1]);
       pin = new Microsoft.Maps.Pushpin(center)
 
      pin.metadata = {
        title: tab[i].name,
        description: tab[i].adress,
    };
 
      Microsoft.Maps.Events.addHandler(pin, 'click', pushpinClicked);
 
      map.entities.push(pin)
 
  }
 
// Affichage de l'infobox quand l'utilisateur clique sur un markeur
  function pushpinClicked(e) {
 
    if (e.target.metadata) {
 
        infobox.setOptions({
            location: e.target.getLocation(),
            title: e.target.metadata.title,
            description: e.target.metadata.adresse,
            visible: true
            });
        }
 
    }
};

[NoSmoking]

Bonjour,

Là ou je bloque, c'est que je n'arrive pas à afficher toutes les infromations d'un parking dans l'infobox.

je dirais plutôt que tu ne lis pas les données au bon endroit.
Tu écris :

Code :

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

var req = JSON.parse(request.response);

et juste après :

Code :

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

1
2
//Récupération des informations du fichier json
for (var i = 0; i < test.records.length; i++){

ce n'est pas test mais req

Accessoirement tu pourrais faire quelque chose de plus « simple/propre »

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
const tab = [];
const req = JSON.parse(request.response);
const data = req.records;
data.forEach(function (d) {
  const o = d.fields;
  tab.push({
    geo: o["geo_point_2d"],
    name: o["nom_parc"],
    address: o["adress_ssc"],
    telephone: o["tel"],
    timeTable: o["horaire_na"],
    motorBikeAcces: o["acces_moto"],
    bikeAcces: o["acces_velo"]
  });
});