Как поместить многократную информацию в информационный блок карт Bing? - PullRequest
Новая
       49

Как поместить многократную информацию в информационный блок карт Bing?

1 голос
/ 04 апреля 2020

Я на самом деле изучаю Javascript и пытаюсь создать веб-приложение, которое отображает карты Bing, которые содержат все автостоянки в городе. Поэтому я должен использовать опубликуемые данные c и отображать необходимую информацию для проекта на картах BING.

Каждая автостоянка представлена ​​канцелярской кнопкой. Когда пользователь нажимает на кнопку, появляется информационное окно, содержащее несколько данных, связанных с парковкой (имя, адрес, телефон, время ... и т.д.).

Сначала я начал с сбора мне потребовалась информация из данных json, затем мне удалось отобразить кнопки и информационные блоки на карте Bing Maps.

Теперь я хочу вставить информацию о каждой парковке в каждый информационный блок, чтобы этот последний отобразит информацию, когда пользователь нажмет на кнопку.

пример:

Название: Название автостоянки Адрес: Motorcycle_Access Bike_Acces: Time_table: Телефон:

Моя проблема это то, что я не могу найти, как это сделать. Исходя из того, что я понял после прочтения документации bing maps, мы можем поместить заголовок и описание только в информационный блок с infobox.setOptions ({}), но как вставить несколько сведений?

Может кто-нибудь помочь мне, пожалуйста? (извините за плохой английский sh, надеюсь, я все понял)

вот мой код: 

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


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

//Map display
function GetMap()
{
    var myOptions = {
        credentials: 'insert key here',
        center: new Microsoft.Maps.Location(48.8534, 2.3488),
        zoom: 12
    }
    map = new Microsoft.Maps.Map('#myMap', myOptions);

    infobox = new Microsoft.Maps.Infobox(map.getCenter(), {
        visible: false
    });

    infobox.setMap(map);
}

//XHR request
var request = new XMLHttpRequest();
request.open('GET', url);
request.responseType = 'JSON';
request.send();

request.onload = function(){

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

//Gathering the needed informations from the data 

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

//creates multiple pushpins

  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: " "
    };

      Microsoft.Maps.Events.addHandler(pin, 'click', pushpinClicked);

      map.entities.push(pin)

  }

//Creates an infobox for each pushpin
  function pushpinClicked(e) {
    //Make sure the infobox has metadata to display.
    if (e.target.metadata) {
        //Set the infobox options with the metadata of the pushpin.
        infobox.setOptions({
            location: e.target.getLocation(),
            title: e.target.metadata.title,
            description: " ",
            visible: true
            });
        }

    }
};

Я пробовал этот код, но он не работал: 

//Gathering the needed informations from the data 

 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,
        adresse: tab[i].adress,
        téléphone : tab[i].telephone,
        horaire : tab[i].timeTable,
        acces_moto : tab[i].motorBikeAcces,
        acces_velo : tab[i].bikeAcces
    };

      Microsoft.Maps.Events.addHandler(pin, 'click', pushpinClicked);

      map.entities.push(pin)

  }

//Creates an infobox for each pushpin

  function pushpinClicked(e) {
    //Make sure the infobox has metadata to display.
    if (e.target.metadata) {
        //Set the infobox options with the metadata of the pushpin.
        infobox.setOptions({
            location: e.target.getLocation(),
            title: e.target.metadata.title,
            description: e.target.metadata.adresse,
            tel : e.target.metadata.téléphone,
            hor : e.target.metadata.horaire,
            moto : e.target.metadata.acces_moto,
            velo : e.target.metadata.acces_velo,
            visible: true
            });
        }

    }
...