前端开发者经常使用各种框架和 API 来构建 Web 应用程序，其中包括使用 Google Maps API 来创建地图应用程序。本文将介绍如何使用 Express.js 和 Google Maps API 构建一个简单的地图应用程序。我们将涵盖以下主题：
- 设置 Express.js 环境
- 连接 Google Maps API
- 构建地图应用程序
- 显示地图
- 添加标记（Markers）
- 基于位置添加标记
- 添加信息框（Info Window）
设置 Express.js 环境
Express.js 是一个快速、简单且灵活的 Node.js Web 框架，它提供了一组强大的工具和功能，用于构建 Web 应用程序。在开始开发我们的地图应用程序之前，让我们先确保我们已经正确地设置了 Express.js 环境。
您可以按照以下步骤设置 Express.js 环境：
安装 Node.js 和 NPM（Node.js 包管理器）。
在终端中运行以下命令来安装 Express.js：
npm install express --save
创建一个新的 Node.js 项目并在其中添加 Express.js。
现在，我们已经设置了 Express.js 环境，可以继续连接 Google Maps API。
连接 Google Maps API
Google Maps API 提供了一组强大的工具和功能，用于创建交互式地图应用程序。在本节中，我们将介绍如何连接 Google Maps API 并在我们的应用程序中使用它。
您可以按照以下步骤连接 Google Maps API：
转到 Google 开发者控制台 并创建一个新的 API 密钥，其中包括 Google Maps JavaScript API。
将以下代码添加到您的 HTML 文件中：
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
您的 API 密钥将取代 "YOUR_API_KEY"，这将允许您连接 Google Maps API。
现在，我们已经连接了 Google Maps API，可以开始构建我们的地图应用程序。
构建地图应用程序
在本节中，我们将展示如何使用 Express.js 和 Google Maps API 构建一个简单的地图应用程序。我们将包括四个主要部分：
- 显示地图
- 添加标记（Markers）
- 基于位置添加标记
- 添加信息框（Info Window）
我们将使用以下示例代码来演示这些部分：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ---------------------------------- ------------ ----- ---- -- - ---------------------- - --------------- --- ---------------- -- -- - ------------------- -- ------- -- ---- -------- ---
-- -------------------- ---- -------
--------- -----
------
------
------------- ---- -----------
----- --------------- ----------------------------
----- ----------------
-------
---- -
------- ------
------ -----
-
--------
-------
------
---------- ---- --------
---- ---------------
--------
-------- --------- -
----- --- - --- ----------------------------------------------- -
----- --
------- - ---- -------- ---- --------- --
---
-
---------
------- ------------------------------------------------------------------------------- ----- ---------------
-------
-------显示地图
地图应用程序中的第一项任务是显示地图。我们使用 Google Maps API 来创建地图，并将其添加到我们的应用程序中。
我们将 initMap() 函数传递给 Google Maps API 来创建地图，并将其添加到我们的 HTML 文件中。在这个函数中，我们创建了一个新的 Map 对象，并设置了以下选项：
zoom：确定地图的缩放级别。center：确定地图的中心点。
通过这些选项，我们已经成功创建了一个简单的地图应用程序。
添加标记（Markers）
接下来，让我们添加一些标记（Markers）到我们的地图应用程序中。这些标记可以用于标识特定的位置或地点。
我们将使用 Marker 对象来添加标记。以下代码将在地图的中心点添加一个标记：
const marker = new google.maps.Marker({
position: { lat: 37.7749, lng: -122.4194 },
map: map,
title: "San Francisco",
});这个代码块将使用以下选项创建新的标记：
position：设置标记的经纬度坐标。map：将标记添加到地图中。title：设置标记的标题。
这将在地图的中心点添加一个标记，标记的标题为 "San Francisco"。
基于位置添加标记
我们还可以添加自定义位置的标记。以下代码将在地图上添加一个新的标记，该标记将基于用户的当前位置进行定位：
-- -------------------- ---- -------
-- -------------- -- ---------- -
--------------------------------------------------- -- -
----- ------ - --- --------------------
--------- -
---- -------------------------
---- --------------------------
--
---- ----
------ ----- ----------
---
---
- ---- -
--------------------- --- -------------
-此代码块使用 getCurrentPosition() 函数来获取用户的当前位置，并创建一个新的标记显示其位置。
请注意，这里使用了一个条件测试来检查用户的位置是否可用。
添加信息框（Info Window）
最后，我们将添加一个信息框（Info Window）来提供更详细的信息。这个信息框将显示有关特定标记的信息。
以下代码将添加一个信息框，当用户点击标记时会显示出来：
-- -------------------- ---- -------
----- ------ - --- --------------------
--------- -
---- --------
---- ----------
--
---- ----
------ ---- -----------
---
----- ---------- - --- ------------------------
-------- -
-----
------- --------------
------ --------- -- - ---- -- ----------- ------ -----------
------
--
---
--------------------------- -- -- -
-------------------- --------
---此代码块将添加以下功能：
- 创建一个新的
InfoWindow对象。 - 当用户点击标记时，显示一个信息框，其中包含有关特定标记的信息。
这将为用户提供更多信息，帮助他们更好地使用地图应用程序。
结论
本文介绍了如何使用 Express.js 和 Google Maps API 构建地图应用程序。我们涵盖了如何设置 Express.js 环境、连接 Google Maps API，并演示了如何使用 API 构建地图应用程序。我们还展示了如何添加标记、基于位置添加标记和添加信息框。希望本文对您有所帮助，启发您构建更多 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67301762eedcc8a97c910b0d