Bing 地图信息框在 Angular 组件内未定义

Question

我正在 angular/typescript 中为 bing 地图实现创建一个组件。我完成了将信息框添加到地图的过程，该信息框最初对用户不可见。当用户单击地图上的任何图钉时，信息框应该显示。

但是它没有，属性显示为未定义。

注意：'DataPoints' 包含包含经纬度坐标和任意 ID 号的对象列表。

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

如前所述，地图已完全加载并正常工作。就在我进入'displayInfobox'方法后，事情变得很奇怪。

Answer 1

要将此保留在 displayInfobox 方法中，我建议您使用任何一种 bind 方法，例如：

Microsoft.Maps.Events.addHandler(pushpin, 'click', this.displayInfobox.bind(this));

或箭头函数：

Microsoft.Maps.Events.addHandler(pushpin, 'click', (e) => this.displayInfobox(e));

有关其他解决方案，请参阅

https://github.com/Microsoft/TypeScript/wiki/%27this%27-in-TypeScript

Bing 地图信息框在 Angular 组件内未定义

Bing Maps infobox is undefined inside Angular component

javascript

undefined

bing-maps

typescript

angular