Javascript 单击时在OSM上显示标记弹出窗口-角度7

我正在做一个简单的网络应用，上面有开放的街道地图和一些标记。现在，当我点击每一个标记时，我想显示一个不同的弹出窗口，其中包含一些关于标记的信息，但我不知道如何正确操作

我使用Angular 7，在HTML文件中，我只显示de-map

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

  }
}

从'@angular/core'导入{Component，OnInit}；
声明变量ol：任何；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
`样式URL:['./app.component.scss']
})
导出类AppComponent实现OnInit{
纬度=40.423533064374；
经度=-3.7045899778604507；
地图：任何；
恩戈尼尼特（）{
this.map=新ol.map({
目标：“地图”，
控件：ol.control.defaults({
属性选项：{
可折叠：错误
}
}),
图层：[
新ol.layer.Tile({
来源：new ol.source.OSM（）
})
],
视图：新ol.view({
中心：Lonlat的其他项目（[-3.7045899778604507，40.423533064374]），
缩放：13
})
});
常量标记=[
{拉丁美洲：40.433533061444374，液化天然气：-3.7145899778604507}，
{拉丁美洲：40.4135330614443741，液化天然气：-3.7045899778604507}
];
常量特征=[]；
for（设i=0；i

我上次使用OSM已经有一段时间了，但通常这些标记将嵌入到您应该知道的HTML元素中。既然您正在使用ANGUR，那么您应该考虑使用这样的东西：在第三方库中使用诸如“代码>文档”、“SeleTestMyBID/<代码>”这样的表达式在角度上下文中是一种强有力的反模式。