angular - 在ionic 3中使用打开层单击标记时如何添加信息窗口？

Question

我有一个 ionic 3 应用程序，它使用我已经放置标记的开放图层图。现在我需要单击标记，这将向我显示有关单击标记的一些内容。我已经通过互联网搜索，但只能找到 jquery 示例。我不想将 jquery 包含到我的应用程序中。请帮助我解决这个问题。

这是我的整个 .ts 文件，我在其中显示了地图并在其中添加了标记

this.api.get_someapi()
  .subscribe(data => {
    this.recent_event_data = data;
    console.log('recent event data', this.recent_event_data);
     var length = this.recent_event_data.length;
     for(var i = 0; i < length; i++){
      var lati = this.recent_event_data[i].latitude;
      var longi = this.recent_event_data[i].longitude;
      this.flash_type = this.recent_event_data[i].flash_type;
        for(var j = 0; j< this.latitude.length; j++){
          console.log('loop long',this.longitude[j]);
          console.log('loop lat', this.latitude[j]);
          var marker =  new ol.Feature({
                      geometry: new ol.geom.Point(
                        ol.proj.fromLonLat([parseFloat(this.longitude[j]), parseFloat(this.latitude[j])])),
                    }); 

                marker.setStyle(new ol.style.Style({
                      image: new ol.style.Icon(({
                          // color: '#ffcd46',
                          crossOrigin: 'anonymous',
                          src: 'https://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png'
                          // src:'/assets/imgs/blue-dot.png'
                      }))
                  }));

                var vectorSource = new ol.source.Vector({
                  features: [marker]
                });   

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

    }
});
this.loading.dismiss();  
// Creating District Vector Source
var district = new ol.layer.Vector({
    renderMode: 'image',
    // title:"District",
    visible:true,
    // baseLayer: true,
    source: new ol.source.Vector({
        url: 'somemap',
        format: new ol.format.GeoJSON()
    })
});

// OSM Layer
var osm=new ol.layer.Tile({
    source: new ol.source.OSM(),
    // title:'Map',
    // type:'base',
    // baseLayer: true,
    visible:true,
});



// Adding the District and OSM layer to the map
var map = new ol.Map({
    layers: [osm, district],
    renderer: 'canvas',
    target: 'map', // Rendering to a particular ID
    view: new ol.View({
        center: ol.proj.transform([84.3995, 20.9517], 'EPSG:4326', 'EPSG:3857'),
        zoom: 6.3
    }),
    controls: ol.control.defaults().extend([
      new ol.control.FullScreen()
    ]),
});

 var container = document.getElementById('popup');
  var content = document.getElementById('popup-content');
  var closer = document.getElementById('popup-closer');


  /**
   * Create an overlay to anchor the popup to the map.
   */
  var overlay = new ol.Overlay({
    element: container,
    autoPan: true,

  });

closer.onclick = function() {
    overlay.setPosition(undefined);
    closer.blur();
    return false;}

map.on("singleclick", function(evt) {
    //var coordinate = evt.coordinate;
    //var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
        //coordinate, 'EPSG:3857', 'EPSG:4326'));

    content.innerHTML = '<p>You clicked here:</p><code>';
    //overlay.setPosition(coordinate);
  });

标签： angularionic-framework