单击（角度）时，在OSM上显示标记弹出窗口

Question

我正在使用带有 Open Street Maps 及其上的一些标记的简单WebApp。现在，当我单击每个标记时，我想显示一个不同的弹出窗口，其中包含有关标记的一些信息，但是我不知道如何正确执行该操作。

我正在使用Agnular 7，并且在HTML文件中我只显示了地图

在Ts文件中，此刻是我的代码：

import { Component, OnInit } from '@angular/core';

declare var ol: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  `styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  latitude = 40.423533061444374;
  longitude = -3.7045899778604507;

  map: any;

  ngOnInit() {
    this.map = new ol.Map({
      target: 'map',
      controls: ol.control.defaults({
        attributionOptions: {
          collapsible: false
        }
      }),
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      view: new ol.View({
        center: ol.proj.fromLonLat([-3.7045899778604507, 40.423533061444374]),
        zoom: 13
      })
    });

    const markers = [
      { lat: 40.433533061444374, lng: -3.7145899778604507 },
      { lat: 40.4135330614443741, lng: -3.7045899778604507 }
    ];
    const features = [];

    for (let i = 0; i < markers.length; i++) {
      const m = markers[i];
      const longitude = m.lng;
      const latitude = m.lat;

      const iconFeature = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.transform([longitude, latitude], 'EPSG:4326', 'EPSG:3857'))
      });

      const iconStyle = new ol.style.Style({
        image: new ol.style.Icon(({
          anchor: [0.5, 1],
          src: 'http://cdn.mapmarker.io/api/v1/pin?text=P&size=40&hoffset=1'
        }))
      });

      iconFeature.setStyle(iconStyle);
      features.push(iconFeature);

    }

    const vectorSource = new ol.source.Vector({
      features: features
    });

    const markerVectorLayer = new ol.layer.Vector({
      source: vectorSource,
    });

    this.map.addLayer(markerVectorLayer);

  }
}