Google Maps Place API调用遇CORS错误及google-maps包使用问题求助

一、解决CORS错误问题 #

• 不要在前端直接调用REST接口：Google Maps Place API的REST接口本身不支持浏览器端的CORS请求，正确方式是使用Google Maps JavaScript API的客户端方法发起文本搜索，而非用axios直接请求REST URL。
• 用后端代理转发请求：如果必须用REST接口，在自己的后端（如Node.js、Java）写一个代理接口，前端调用这个后端接口，由后端发起对Google API的请求，再把结果返回给前端，彻底绕开CORS限制。
  以下是Node.js（Express）的简单代理示例：

  const express = require('express');
  const axios = require('axios');
  const app = express();
  
  app.get('/api/search-gyms', async (req, res) => {
    const apiKey = '你的API密钥';
    const url = `https://maps.googleapis.com/maps/api/place/textsearch/json?location=50.6288692%2C3.0621601&type=gym&key=${apiKey}`;
    try {
      const response = await axios.get(url);
      res.json(response.data);
    } catch (error) {
      res.status(error.response?.status || 500).json(error.response?.data || {msg: '请求失败'});
    }
  });
  
  app.listen(3000, () => console.log('代理服务运行在3000端口'));
  

  前端直接调用/api/search-gyms即可，无需额外CORS代理。
• 检查API密钥配置：确保Google Cloud控制台中已启用Places API，并且密钥的限制设置正确（比如HTTP引用限制开启的话，要添加你的前端域名；也可暂时取消限制做测试）。

二、解决google-maps包找不到place对象的问题 #

• 该npm包是Google Maps JavaScript API的加载器，不存在google.maps.place这个构造函数，正确调用需使用google.maps.places命名空间下的类：
  1. 加载API时必须指定places库：

  const GoogleMapsLoader = require('google-maps');
  GoogleMapsLoader.KEY = '你的API密钥';
  GoogleMapsLoader.LIBRARIES = ['places']; // 必须加载places库
  
  GoogleMapsLoader.load((google) => {
    // 初始化地图（PlacesService需要绑定地图实例）
    const map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 50.6288692, lng: 3.0621601},
      zoom: 12
    });
  
    // 构造文本搜索请求参数
    const request = {
      location: new google.maps.LatLng(50.6288692, 3.0621601),
      type: ['gym']
    };
  
    // 发起文本搜索
    const service = new google.maps.places.PlacesService(map);
    service.textSearch(request, (results, status) => {
      if (status === google.maps.places.PlacesServiceStatus.OK) {
        console.log(results);
        // 处理搜索结果逻辑
      }
    });
  });
  

• 核心注意点：加载API时必须包含places库，否则google.maps.places命名空间不会存在；文本搜索通过PlacesService的textSearch方法实现，没有独立的place构造函数。

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