6.使用 Vue 3 和 OpenLayers 加载 Google 地图（详细教程）

前言
Vue 是现代前端开发的热门框架，而 OpenLayers 是一个功能强大的地图库。将二者结合，可以轻松实现地图加载与操作。本篇文章将以 Google 地图为例，演示如何在 Vue 3 项目中使用 OpenLayers 加载和切换多种地图类型。

1. 项目准备

1.1 创建 Vue 3 项目

确保本地环境已安装 Node.js 和 npm。运行以下命令创建一个 Vue 3 项目：

npm init vue@latest

按照提示选择 Vue 3 + Vite，完成项目初始化后，进入项目目录并安装依赖：

cd your-project-name npm install

1.2 安装 OpenLayers

OpenLayers 提供了丰富的地图功能。通过 npm 安装：

npm install ol

2. 核心实现：加载 Google 地图

以下代码展示了如何在 Vue 3 中加载 Google 地图，并通过按钮切换不同的地图样式。</