在现代web开发中，使用地图应用程序成为了时下最热门的需求之一，尤其在移动设备上。随着 Google Maps API 的完善和开发者社区的壮大，构建基于地图的应用程序变得更加容易和有趣。在本文中，我们将使用 Express.js 和 Google Maps API 来构建一个简单的地图应用程序。
前置要求
在开始构建之前，请确保您已经安装了 Node.js 和 NPM。
第一步：创建一个 Express.js 应用程序
首先，让我们创建一个基本的 Express.js 应用程序。打开您的终端，输入以下命令：
mkdir mapapp cd mapapp npm init -y npm install express
这将创建一个名为 mapapp 的新目录，并且安装了 express.js 库。
然后，在您的编辑器中打开您的工作目录，创建一个名为 index.js 的文件。在文件中，使用以下代码创建一个简单的 Express.js 应用程序：
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send('Hello World!');
});
app.listen(3000, () => {
console.log('Listening on port 3000');
});这段代码将创建一个应用程序，监听3000端口，并在调用根地址时，向客户端发送 "Hello World!"。
接下来，我们需要安装用于处理http请求的 body-parser 库，以便可以从客户端读取POST请求的正文。运行以下命令：
npm install body-parser
在 index.js 文件中添加以下代码配置body-parser：
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.get('/', (req, res) => {
res.send('Hello World!');
});
app.listen(3000, () => {
console.log('Listening on port 3000');
});第二步：创建 Google Maps API 访问密钥
在继续之前，我们需要先创建一个用于访问 Google Maps API 的密钥。完成以下步骤：
- 打开 Google Cloud Platform 控制台。
- 创建一个新的项目。
- 在项目概览页面上，点击 "API 和服务"，然后点击 "凭据"。
- 在 "凭据" 页上，点击 "创建凭据"，并选择 "API 密钥"。
- 在 "创建凭据" 对话框中，选择 "无限制" 或只允许指定 IP 地址访问。
此时，您将获得一个 Google Maps API 访问密钥，我们将会在接下来的步骤中使用它。
第三步：在地图上显示一个标记
现在，我们将使用 Google Maps JavaScript API 和 Express.js 应用程序，将地图上显示一个标记。
首先，在 index.js 文件中，使用以下代码向客户端发送与 Google Maps API 的 HTML：
app.get('/', (req, res) => {
res.send(`
<html>
<head>
<title>Map App</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</head>
<body>
<div id="map" style="height:400px;width:100%;"></div>
<script>
function initMap() {
const myLatLng = { lat: 39.948155, lng: 116.397137 };
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 14,
center: myLatLng,
});
const marker = new google.maps.Marker({
position: myLatLng,
map,
title: "Hello World!",
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
</body>
</html>
`);
});这段代码将向客户端渲染一个包含 Google Maps JavaScript API 的HTML页面，并将地图中心放置在北京的位置。我们也将添加一个带有 "Hello World!" 标注的标记。
在上述代码中，要将 YOUR_API_KEY 替换为您在前面的步骤中创建的 Google Maps API 访问密钥。
运行以下命令启动 Express.js 应用程序：
node index.js
接下来，打开浏览器，并导航到 http://localhost:3000, 您将看到地图和一个带有 "Hello World!" 的标记。
第四步：让客户端添加标记
现在，让我们尝试让客户端向地图上添加标记。我们将使用 HTML 获取表单数据，并在 Google Maps API 加载时通过 JavaScript 呈现一个空白地图。
首先，更新 index.js 中的代码，以呈现一个简单的 HTML 表单，如下所示：
app.get('/', (req, res) => {
res.send(`
<html>
<head>
<title>Map App</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</head>
<body>
<div>
<form method="post" action="/">
<label for="name">Name:</label>
<input type="text" name="name" />
<br />
<label for="lat">Latitude:</label>
<input type="text" name="lat" />
<br />
<label for="lng">Longitude:</label>
<input type="text" name="lng" />
<br />
<button type="submit">Add Marker</button>
</form>
</div>
<br />
<div id="map" style="height:400px;width:100%;"></div>
<script>
let map;
function initMap() {
const myLatLng = { lat: 39.948155, lng: 116.397137 };
map = new google.maps.Map(document.getElementById("map"), {
zoom: 14,
center: myLatLng,
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
</body>
</html>
`);
});然后，我们将添加一个 POST 处理程序，以处理客户端提交的数据，并将表单值添加到地图中。在 index.js 文件中添加以下代码：
app.post('/', (req, res) => {
const name = req.body.name;
const lat = parseFloat(req.body.lat);
const lng = parseFloat(req.body.lng);
const marker = new google.maps.Marker({
position: { lat, lng },
title: name,
map
});
res.redirect('/');
});这段代码将从客户端的 POST 请求中读取表单数据，并将标记添加到地图中。然后，将客户端重定向到根位置。
现在，我们已经完成了构建基于 Google Maps API 的 Express.js 应用程序。
完整的 index.js 文件如下：
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.get('/', (req, res) => {
res.send(`
<html>
<head>
<title>Map App</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</head>
<body>
<div>
<form method="post" action="/">
<label for="name">Name:</label>
<input type="text" name="name" />
<br />
<label for="lat">Latitude:</label>
<input type="text" name="lat" />
<br />
<label for="lng">Longitude:</label>
<input type="text" name="lng" />
<br />
<button type="submit">Add Marker</button>
</form>
</div>
<br />
<div id="map" style="height:400px;width:100%;"></div>
<script>
let map;
function initMap() {
const myLatLng = { lat: 39.948155, lng: 116.397137 };
map = new google.maps.Map(document.getElementById("map"), {
zoom: 14,
center: myLatLng,
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
</body>
</html>
`);
});
app.post('/', (req, res) => {
const name = req.body.name;
const lat = parseFloat(req.body.lat);
const lng = parseFloat(req.body.lng);
const marker = new google.maps.Marker({
position: { lat, lng },
title: name,
map
});
res.redirect('/');
});
app.listen(3000, () => {
console.log('Listening on port 3000');
});成功启动您的应用程序，打开浏览器，并导航到 http://localhost:3000，您将看到通过表单向地图添加标记的选项。
总结
在本文中，我们使用 Express.js 和 Google Maps API 构建了一个简单的地图应用程序。我们了解了如何获取 Google Maps API 访问密钥、如何在 Express.js 应用程序中使用 body-parser 库来读取 POST 正文，如何使用 Google Maps JavaScript API 在客户端呈现地图，并向地图添加标记。
如果您有兴趣进一步了解或扩展基于 Google Maps API 的应用程序，我们建议您在 Google Maps API 开发者文档中了解更多。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b5ff3dadd4f0e0ffeb6cff