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

在 OpenLayers 3 中，当单击标记时显示弹出窗口的方法如下：

首先，你需要创建一个地图容器，可以是一个 <div> 元素，用于显示地图。

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

在 JavaScript 中，你需要引入 OpenLayers 库，并创建一个地图对象。

// 引入 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); // 设置弹出窗口的位置
});

通过以上步骤，当你在 OpenLayers 3 中单击标记时，会显示一个弹出窗口，内容为 "这是一个弹出窗口"。你可以根据实际需求自定义弹出窗口的内容和样式。

推荐的腾讯云相关产品：腾讯云地图服务（https://cloud.tencent.com/product/maps）