如何在Node.js中无浏览器调用Google Maps JavaScript API获取路径数据

问题背景 #

需要获取Google Maps中仅能通过JavaScript API返回的steps、legs和overview_path字段数据（这些数据无法通过直接调用Directions API接口获取），不需要地图可视化，只需要对应的JSON响应。尝试用Node.js结合@googlemaps/js-api-loader库实现，但运行时抛出ReferenceError: window is not defined错误。目前采用的临时方案是修改Google官方示例代码，启动本地服务后用pyppeteer无头浏览器自动获取响应，该方案过于冗余，希望找到无需无头浏览器的实现方式。

尝试的代码 #

const { Loader } = require("@googlemaps/js-api-loader");

const loader = new Loader({
  apiKey: API_KEY,
  version: "weekly"
});

loader.load().then(() => {
  // initialize services
  const directionsService = new google.maps.DirectionsService()

  directionsService
  .route({
    origin: "Genf",
    destination: "Basel",
    travelMode: google.maps.TravelMode.TRANSIT,
  })
  .then((response) => {
    console.log(JSON.stringify(response, null, 2));
  })
});

遇到的错误 #

~$ node index.js
ReferenceError: window is not defined.

解决方案 #

Google Maps JavaScript API为浏览器环境设计，依赖window对象，直接在Node.js环境运行会报错。以下是两种更简洁的替代方案：

方式一：使用官方Node.js客户端库（推荐） #

Google提供了专门的Node.js版Maps服务库@googlemaps/google-maps-services-js，无需依赖浏览器环境，直接调用Directions API即可获取包含steps、legs和overview_path的完整响应。

1. 安装依赖

npm install @googlemaps/google-maps-services-js

2. 示例代码

const { Client } = require("@googlemaps/google-maps-services-js");

const client = new Client({});

client.directions({
  params: {
    origin: "Genf",
    destination: "Basel",
    travelMode: "transit",
    key: "你的API_KEY"
  },
  timeout: 10000 // 设置超时时间
})
.then((response) => {
  // 响应数据包含所需的steps、legs、overview_path字段
  console.log(JSON.stringify(response.data, null, 2));
})
.catch((err) => {
  console.error(err);
});

方式二：模拟浏览器环境（备选） #

如果确实需要使用JavaScript API的Loader，可以用jsdom模拟浏览器的window对象，但该方式可能存在兼容性问题，不推荐作为首选方案。

1. 安装依赖

npm install @googlemaps/js-api-loader jsdom

2. 示例代码

const { Loader } = require("@googlemaps/js-api-loader");
const { JSDOM } = require("jsdom");

// 模拟浏览器DOM环境
const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>');
global.window = dom.window;
global.document = dom.window.document;
global.navigator = dom.window.navigator;

const loader = new Loader({
  apiKey: "你的API_KEY",
  version: "weekly"
});

loader.load().then(() => {
  const directionsService = new window.google.maps.DirectionsService();

  directionsService.route({
    origin: "Genf",
    destination: "Basel",
    travelMode: window.google.maps.TravelMode.TRANSIT,
  })
  .then((response) => {
    console.log(JSON.stringify(response, null, 2));
  })
  .catch((err) => {
    console.error(err);
  });
});

内容的提问来源于stack exchange，提问作者augustin souchy