openlayers使用InfoWindow并显示×可关闭弹框
时间: 2024-02-02 21:03:14 浏览: 135
vue-openlayers实现地图坐标弹框效果
您可以使用 OpenLayers 中的 Overlay 和 Popup 组件来实现类似 InfoWindow 的效果,并且可以添加一个关闭按钮。以下是一个示例代码:
```javascript
// 创建一个 overlay
var overlay = new ol.Overlay({
element: document.getElementById('popup-container'),
autoPan: true,
autoPanAnimation: {
duration: 250
}
});
// 添加 overlay 到地图
map.addOverlay(overlay);
// 监听地图点击事件
map.on('click', function(evt) {
// 获取点击坐标
var coordinate = evt.coordinate;
// 设置 overlay 的位置
overlay.setPosition(coordinate);
// 显示 overlay
overlay.getElement().style.display = 'block';
});
// 给关闭按钮添加点击事件
var closeBtn = document.getElementById('popup-closer');
closeBtn.addEventListener('click', function() {
// 隐藏 overlay
overlay.getElement().style.display = 'none';
});
```
在上面的代码中,我们创建了一个 Overlay 组件,将其添加到地图中,并在地图点击事件中设置其位置并显示。同时,我们还为 Overlay 中的关闭按钮添加了一个点击事件,点击后隐藏 Overlay。
需要注意的是,上面的代码中的 `popup-container` 和 `popup-closer` 是 HTML 中对应的元素 ID,您需要自行创建这些元素并设置其样式和内容。
阅读全文