如何使用Puppeteer从Google Maps链接中提取店铺名称与地址

云上老周

2026-10-10

问题原因&解决方案

你代码存在3个核心问题：

CSS选择器格式错误：你要定位的x3AX1-LfntMc-header-title-title是class属性值，CSS选择器中类名必须加前缀.，漏写前缀会导致无法匹配到对应元素
未等待动态元素加载：谷歌地图的店铺详情属于异步渲染内容，page.goto执行完成时动态内容还没渲染完成，直接查询元素会返回空
URL特殊字符转义风险：在单引号包裹的字符串中写Donna\'s的转义虽然语法合法，但很容易出现转义冲突，建议用反引号包裹模板字符串规避这类问题

修正后可运行代码

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  // 模板字符串包裹URL，避免单引号转义问题
  await page.goto(`https://www.google.com/maps/place/Donna's+Garden+Flower+Shop+-+Chicago,+IL/@41.9898102,-87.7360212,17z/data=!3m1!4b1!4m5!3m4!1s0x880fce639267ed2f:0x3e47d8ddf3040316!8m2!3d41.9898313!4d-87.7338812?authuser=0&hl=en`);
  
  // 先等待店铺名称元素加载完成
  const nameSelector = '.x3AX1-LfntMc-header-title-title span';
  await page.waitForSelector(nameSelector, { timeout: 10000 });
  const shopName = await page.$eval(nameSelector, span => span.textContent.trim());
  console.log('店铺名称：', shopName);

  // 获取店铺地址
  const addressSelector = '.Io6YTe.fontBodyMedium';
  await page.waitForSelector(addressSelector, { timeout: 10000 });
  const shopAddress = await page.$eval(addressSelector, el => el.textContent.trim());
  console.log('店铺地址：', shopAddress);

  await browser.close();
})();