无法读取属性 'addBubble' 中未定义的此处映射 angular 9

Question

我正在尝试在我的 angular 应用程序中开始使用此处的地图。所以我想在地图上放置两个标记，并在单击其中一个时显示一个 infoBubble。我将 the documentation 作为我的应用程序的基础，但我无法让它工作。

单击其中一个地图标记时出现的错误是：

TypeError: Cannot read property 'addBubble' of undefined

这是我代码中的这一行 -> this.ui.addBubble(bubble);

这是我的map.component.ts

constructor(
    private monitoringService: MonitoringService
) {
    this.platform = new H.service.Platform({
        "apikey": "xUrjKBvy5RDYJFnKrP6uxXXXXXXXXXXXXVZ_Y44",
        useHTTPS: true
    });
}

ngAfterViewInit() {
// Obtain the default map types from the platform
    this.defaultLayers = this.platform.createDefaultLayers();

    // Instantiate and display a map
    this.map = new H.Map(document.getElementById('map'), this.defaultLayers.vector.normal.map, {
    center: {lat: 51.110620, lng: 10.384862},
    zoom: 7
    });

    this.behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));

    this.ui = H.ui.UI.createDefault(this.map, this.defaultLayers);

    this.addInfoBubble(this.map);

}

addInfoBubble(map) {
    this.group = new H.map.Group();

    map.addObject(this.group);

    // add 'tap' event listener, that opens info bubble, to the group
    this.group.addEventListener('tap', function (evt) {
      // event target is the marker itself, group is a parent event target
      // for all objects that it contains
      let bubble =  new H.ui.InfoBubble(evt.target.getGeometry(), {
        // read custom data
        content: evt.target.getData()
      });
      // show info bubble
      this.ui.addBubble(bubble);
    }, false);

    this.addMarkerToGroup(this.group, {lat:53.439, lng:-2.221},
      'Manchester City' + 'City of Manchester Stadium Capacity: 48,000');

    this.addMarkerToGroup(this.group, {lat:53.430, lng:-2.961},
      'Liverpool' + ' Anfield Capacity: 45,362');      
  }


addMarkerToGroup(group, coordinate, html) {
    this.marker = new H.map.Marker(coordinate);
    // add custom data to the marker
    this.marker.setData(html);
    group.addObject(this.marker);
}

}

我还包括了这些脚本：

  <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
  <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
  <script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
  <script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>

当然还有 3.1 mapjs-ui.css。

Answer 1

当你在这样的函数中使用它时，你的 this 上下文不是全局的。尝试使用如下所示的粗箭头函数：

addInfoBubble(map) {
    this.group = new H.map.Group();

    map.addObject(this.group);

    // add 'tap' event listener, that opens info bubble, to the group
    this.group.addEventListener('tap', (evt)=> {
      // event target is the marker itself, group is a parent event target
      // for all objects that it contains
      let bubble =  new H.ui.InfoBubble(evt.target.getGeometry(), {
        // read custom data
        content: evt.target.getData()
      });
      // show info bubble
      this.ui.addBubble(bubble);
    }, false);

    this.addMarkerToGroup(this.group, {lat:53.439, lng:-2.221},
      'Manchester City' + 'City of Manchester Stadium Capacity: 48,000');

    this.addMarkerToGroup(this.group, {lat:53.430, lng:-2.961},
      'Liverpool' + ' Anfield Capacity: 45,362');      
  }

无法读取属性 'addBubble' 中未定义的此处映射 angular 9

cannot read property 'addBubble' of undefined in here maps in angular 9

here-api

angular

无法读取 属性 'addBubble' 中未定义的此处映射 angular 9

cannot read property 'addBubble' of undefined in here maps in angular 9

here-api

angular

无法读取属性 'addBubble' 中未定义的此处映射 angular 9