48.在 Vue 3 中使用 OpenLayers 实现鼠标悬停显示城市名片

在现代前端开发中，Vue 3 和 OpenLayers 是两个强大的工具。Vue 3 提供了简洁高效的前端框架，而 OpenLayers 则在地图应用领域表现优异。本篇文章将详细介绍如何结合 Vue 3 和 OpenLayers，实现一个简单的鼠标悬停地图上的点位，显示城市名片的功能。

实现效果

1. 地图加载成功后，显示中国的部分城市点位，如北京、大连和天津。
2. 当鼠标移动到某个城市点位时，会弹出一个包含该城市名称、图片和简介的悬浮窗口。
3. 鼠标移出点位时，悬浮窗口会自动关闭。

实现步骤

1. 项目初始化

在开始前，请确保你的项目已经配置好 Vue 3 环境，并安装了 OpenLayers：

npm install ol

2. Vue 3 和 OpenLayers 的代码实现

以下是完整代码，包括地图初始化、点位加载以及鼠标悬停事件处理：

<!--
 * @Author: 彭麒
 * @Date: 2024/12/28
 * @Email: 106247095