使用 Express.js 和 Google Maps API 创建地图应用的完全指南-JavaScript中文网-JavaScript教程资源分享门户

简介

在本文中，我们将探讨如何使用 Express.js 和 Google Maps API 创建一个简单的地图应用程序。我们将介绍如何设置 Express.js 服务器，并使用 Google Maps API 在客户端上呈现地图。我们还将讨论如何从 Google Maps API 中获取数据，并在地图上添加标记和信息窗口。

准备工作

在开始构建我们的地图应用程序之前，我们需要准备一些工具和资源。首先，我们需要安装 Node.js 和 npm。我们还需要注册一个 Google Maps API 密钥，并将其添加到我们的项目中。

安装 Node.js 和 npm

要安装 Node.js 和 npm，请前往 Node.js 的官方网站，并下载适用于您的操作系统的安装程序。安装程序将包括 Node.js 运行时以及 npm 包管理器。

要注册 Google Maps API 密钥，请前往 Google Cloud Console，并创建一个新项目。然后，转到“API 和服务”部分，并启用“Google Maps JavaScript API”和“地理编码 API”。最后，生成一个 API 密钥，并将其添加到我们的项目中。

创建 Express.js 服务器

现在，我们已经准备好开始构建我们的地图应用程序了。首先，我们需要设置一个 Express.js 服务器。我们将使用 Express.js 提供的静态文件服务来提供客户端代码和资源。

要设置 Express.js 服务器，请创建一个新的 Node.js 项目，并将以下代码添加到您的项目中的 app.js 文件中：

const express = require('express');
const app = express();

app.use(express.static('public'));

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

在这个例子中，我们创建了一个新的 Express.js 应用程序，并将其设置为提供位于 public 目录中的静态文件。我们还将服务器设置为在端口 3000 上监听传入的连接。

在客户端上呈现地图

现在，我们已经设置了 Express.js 服务器，我们可以开始在客户端上呈现地图了。我们将使用 Google Maps JavaScript API 来呈现地图，并在客户端上添加标记和信息窗口。

要在客户端上呈现地图，请在 public 目录中创建一个新的 HTML 文件，并将以下代码添加到该文件中：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <title>Map App</title>
    <style>
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function initMap() {
        const map = new google.maps.Map(document.getElementById('map'), {
          center: { lat: 37.7749, lng: -122.4194 },
          zoom: 12
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
  </body>
</html>

在这个例子中，我们创建了一个包含一个 div 元素的 HTML 文件，该元素用于呈现地图。我们还包含了一个用于初始化地图的 JavaScript 函数 initMap。在这个函数中，我们创建了一个新的 Google Maps 对象，并将其添加到 div 元素中。

我们还包含了一个指向 Google Maps JavaScript API 的 URL，该 URL 包含我们注册的 API 密钥以及一个回调函数 initMap。这个 URL 还包括 async 和 defer 属性，以确保脚本在页面加载时异步加载。

现在，我们已经可以在客户端上呈现地图了。如果您在浏览器中打开这个 HTML 文件，您应该会看到一个包含地图的页面。

从 Google Maps API 中获取数据

现在，我们已经可以在客户端上呈现地图了，我们可以开始从 Google Maps API 中获取数据了。我们将使用地理编码 API 来获取地址的经纬度，并在地图上添加标记和信息窗口。

要从 Google Maps API 中获取数据，请在 initMap 函数中添加以下代码：

// javascriptcn.com 代码示例
const geocoder = new google.maps.Geocoder();

geocoder.geocode({ address: 'San Francisco' }, (results, status) => {
  if (status === 'OK') {
    const location = results[0].geometry.location;

    const marker = new google.maps.Marker({
      position: location,
      map: map
    });

    const infowindow = new google.maps.InfoWindow({
      content: results[0].formatted_address
    });

    marker.addListener('click', () => {
      infowindow.open(map, marker);
    });
  }
});

在这个例子中，我们创建了一个新的 Geocoder 对象，并使用它来获取“旧金山”的经纬度。一旦我们有了这个位置，我们就创建了一个新的标记，并将其添加到地图上。我们还创建了一个信息窗口，并将其与标记关联起来。最后，我们将侦听标记的单击事件，并在单击时打开信息窗口。

现在，我们已经可以从 Google Maps API 中获取数据了。如果您在浏览器中打开这个 HTML 文件，您应该会看到一个包含一个标记和信息窗口的地图。

总结

在本文中，我们介绍了如何使用 Express.js 和 Google Maps API 创建一个简单的地图应用程序。我们设置了一个 Express.js 服务器，并使用 Google Maps JavaScript API 在客户端上呈现地图。我们还从 Google Maps API 中获取数据，并在地图上添加了标记和信息窗口。

这个例子只是一个入门级别的示例，但它展示了如何使用 Express.js 和 Google Maps API 构建一个简单的地图应用程序。我们希望这篇文章对您有所帮助，并鼓励您继续学习和探索这个主题。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/656e91c4d2f5e1655d6bfb7d