在openlayer 3中单击标记时显示弹出窗口

<div id="map" style="width: 100%; height: 400px;"></div>

// 引入 OpenLayers 库
import Map from 'ol/Map';
import View from 'ol/View';
import Overlay from 'ol/Overlay';
import { fromLonLat } from 'ol/proj';

// 创建地图容器
const map = new Map({
  target: 'map',
  view: new View({
    center: fromLonLat([0, 0]), // 设置地图中心点
    zoom: 10 // 设置地图缩放级别
  })
});

import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import { Icon, Style } from 'ol/style';

// 创建标记的位置
const markerPosition = fromLonLat([longitude, latitude]);

// 创建标记的样式
const markerStyle = new Style({
  image: new Icon({
    src: 'marker.png', // 标记的图标
    anchor: [0.5, 1] // 图标的锚点位置
  })
});

// 创建标记的要素
const markerFeature = new Feature({
  geometry: new Point(markerPosition)
});

// 设置标记的样式
markerFeature.setStyle(markerStyle);

// 将标记添加到地图上
map.addLayer(markerFeature);

// 创建弹出窗口的内容
const popupContent = document.createElement('div');
popupContent.innerHTML = '这是一个弹出窗口';

// 创建弹出窗口的 Overlay
const popupOverlay = new Overlay({
  element: popupContent,
  positioning: 'bottom-center',
  stopEvent: false,
  offset: [0, -10] // 弹出窗口的偏移量
});

// 将弹出窗口的 Overlay 添加到地图上
map.addOverlay(popupOverlay);

// 监听标记的单击事件
markerFeature.on('click', function(event) {
  const coordinate = event.coordinate; // 获取点击位置的坐标
  popupOverlay.setPosition(coordinate); // 设置弹出窗口的位置
});