Javascript OpenLayers使图标可点击

我正在用OpenLayers制作一个地图，它从数据库中提取数据，并通过API解析数据以将其显示在地图上，该部分工作完全正常。请看：但是，当试图使图标可点击时，我遇到了问题。我不确定在考虑多个图标时是否需要做一些不同的事情，但我尝试按照文档中的说明进行操作，但没有任何帮助。我基本上是想在点击船只时，将船只上方的MMSI ID显示为一个弹出窗口，但它实际上无法正常工作。它会正确地将鼠标移到图标上，但单击实际上什么也做不了。如果有人能帮忙，我们将不胜感激。我已将我的index.js附在下面：

const { Client } = require('pg')
import "ol/ol.css";
import Feature from "ol/Feature";
import Point from "ol/geom/Point";
import Map from "ol/Map";
import View from "ol/View";
import Overlay from 'ol/Overlay';
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import { defaults as defaultControls, FullScreen } from "ol/control";
import OSM from "ol/source/OSM";
import { fromLonLat } from "ol/proj";
import VectorSource from "ol/source/Vector";
import { Icon, Style } from "ol/style";

const newportLonLat = [-71.307607, 41.529193];
const newportWebMercator = fromLonLat(newportLonLat);

//const text = 'SELECT DISTINCT mmsi, MAX(basedatetime), lat, lon FROM public.vessels GROUP BY mmsi, lat, lon ORDER by MAX(basedatetime) DESC, mmsi, lat, lon'

function loadJSON() {
  var data_file = "http://localhost:3000/latlong";
  var http_request = new XMLHttpRequest();
  try{
     // Opera 8.0+, Firefox, Chrome, Safari
     http_request = new XMLHttpRequest();
  }catch (e) {
     // Internet Explorer Browsers
     try{
        http_request = new ActiveXObject("Msxml2.XMLHTTP");

     }catch (e) {

        try{
           http_request = new ActiveXObject("Microsoft.XMLHTTP");
        }catch (e) {
           // Something went wrong
           alert("Your browser broke!");
           return false;
        }

     }
  }

  http_request.onreadystatechange = function() {

     if (http_request.readyState == 4  ) {
        // Javascript function JSON.parse to parse JSON data
        console.log(http_request);
        var jsonObj = JSON.parse(http_request.responseText);
        var allIcons = [];
        for(var i = 0; i < jsonObj.length - 1; i++){ 
          console.log("-----------")
          console.log("Latitude:  ", jsonObj[i]['lat'])
          console.log("Longitude: ", jsonObj[i]['lon'])
          console.log("ID: ", jsonObj[i]['mmsi'])

          var lat = jsonObj[i]['lat']
          var long = jsonObj[i]['lon']
          var mmsi = jsonObj[i]['mmsi']

          var iconFeature = new Feature({
            geometry: new Point(fromLonLat([long, lat])),
            name: mmsi,
            population: 4000,
            rainfall: 500
          });

          var iconStyle = new Style({
            image: new Icon(
              /** @type {olx.style.IconOptions} */ ({
                anchor: [0.5, 46],
                anchorXUnits: "fraction",
                anchorYUnits: "pixels",
                src: "https://i.imgur.com/P30vpnp.png",
                scale: 0.5

              })
            )
          });
          iconFeature.setStyle(iconStyle);
          allIcons.push(iconFeature);

        }
        var map = new Map({
          controls: defaultControls().extend([new FullScreen()]),
          layers: [
            new TileLayer({
              source: new OSM()
            }),
            new VectorLayer({
              style: function(feature) {
                return feature.get("style");
              },
              source: new VectorSource({ features: allIcons })
            })
          ],
          target: document.getElementById('map'),
          view: new View({
            center: newportWebMercator,
            zoom: 3
          })
        });
        var element = document.getElementById('popup');

var popup = new Overlay({
  element: element,
  positioning: 'bottom-center',
  stopEvent: false,
  offset: [0, -50]
});

map.addOverlay(popup);

// display popup on click
map.on('click', function(evt) {
  var feature = map.forEachFeatureAtPixel(evt.pixel,
    function(feature) {
      return feature;
    });
  if (feature) {
    var coordinates = feature.getGeometry().getCoordinates();
    popup.setPosition(coordinates);
    $(element).popover({
      placement: 'top',
      html: true,
      content: feature.get('name')
    });
    $(element).popover('show');
  } else {
    $(element).popover('destroy');
  }
});

// change mouse cursor when over marker
map.on('pointermove', function(e) {
  if (e.dragging) {
    $(element).popover('destroy');
    return;
  }
  var pixel = map.getEventPixel(e.originalEvent);
  var hit = map.hasFeatureAtPixel(pixel);
  map.getTarget().style.cursor = hit ? 'pointer' : '';
});

     }
  }

  http_request.open("GET", data_file, true);
  http_request.send();
}
loadJSON();

---

确保在下一场演出之前销毁了popover。请看，您可能想删除此代码：map.on'pointermove'，function e{if e.dragging{$element.popover'destroy'；return；}@geocodezip我这样做了，它修复了鼠标悬停功能，但由于某些原因，弹出窗口本身仍然没有显示。您知道为什么吗？感谢您迄今为止的帮助。