Je suis en train de créer un composant en angular/tapuscrit pour une implémentation de cartes bing. J'ai parcouru le processus pour ajouter une infobox à la carte qui ne serait initialement pas visible par l'utilisateur. Lorsque l'utilisateur clique sur l'un des punaises de la carte, l'infobox est censée s'afficher.Bing Maps infobox est indéfini à l'intérieur du composant Angular
Cependant, ce n'est pas le cas et la propriété est affichée comme indéfinie.
Remarque: 'DataPoints' contient une liste d'objets contenant des coordonnées lat longues et un numéro d'identification arbitraire.
import { Component, AfterViewInit } from '@angular/core';
import { DataPoint } from '../common/data-point'
import { DataPoints } from '../common/data-points'
@Component({
selector: 'app-simple-bing-map',
templateUrl: './simple-bing-map.component.html',
styleUrls: ['./simple-bing-map.component.css'],
providers: []
})
export class SimpleBingMapComponent implements AfterViewInit {
private map: any;
private infobox: any;
ngAfterViewInit() {
this.getMap();
}
populateMap(){
for(var i in DataPoints){
var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(DataPoints[i].Lat, DataPoints[i].Long) , null);
pushpin.metadata = {
title: "Test Pushpin",
description: DataPoints[i].ID,
};
//Add a click event handler to the pushpin.
Microsoft.Maps.Events.addHandler(pushpin, 'click', this.displayInfobox);
//place pushpin
this.map.entities.push(pushpin);
}
}
getMap() {
//check if Microsoft is available
if ((window as any).Microsoft && (window as any).Microsoft.Maps) {
//if it is available create map instance
this.map = new Microsoft.Maps.Map(document.getElementById('mapId'), {
credentials: 'Your Bing Maps Key Here',
});
//initialize infobox
this.infobox = new Microsoft.Maps.Infobox(this.map.getCenter(), {
title: 'Pushpins',
description: 'ID Number'
}
);
//hide infobox
this.infobox.setOptions({ visible: false })
//Assign the infobox to a map instance.
this.infobox.setMap(this.map);
this.populateMap();
}
//wait and try again
else {
setTimeout(() => { this.getMap() }, 1000);
}
}
displayInfobox(e) {
//hide any previous infobox
this.infobox.setOptions({ visible: false });
//Make sure the infobox has metadata to display.
if (e.target.metadata) {
//Set the infobox options with the metadata of the pushpin.
this.infobox.setOptions({
location: e.target.getLocation(),
title: e.target.metadata.title,
description: e.target.metadata.description,
visible: true
});
}
}
}
Comme indiqué précédemment, la carte se charge complètement et fonctionne comme elle le devrait. C'est juste après que j'entre dans la méthode 'displayInfobox' que les choses agissent bizarrement.