не может прочитать свойство 'addBubble' из неопределенных здесь карт в angular 9 - PullRequest
Новая
       5

не может прочитать свойство 'addBubble' из неопределенных здесь карт в angular 9

0 голосов
/ 02 марта 2020

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

Ошибка, которую я получаю при нажатии на один из маркеров карты:

TypeError: Невозможно прочитать свойство 'addBubble' с неопределенным

, которое представляет собой эту строку внутри моего кода -> this.ui.addBubble(bubble);

это моя карта. 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 js -ui. css конечно.

1 Ответ

1 голос
/ 02 марта 2020

Ваш 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');      
  }
...