Next.js中Google Places Autocomplete返回非英国清真寺结果问题

• 调用Google Places Autocomplete API意图获取英国境内清真寺名称，但返回结果为全球范围的清真寺（如孟加拉国、阿联酋的结果）
• 提取名称时使用了description字段，导致名称包含完整地址，显示不符合预期

当前代码 #

import axios from "axios";

export default async function GetMosques(req, res) {
  console.log(req.body.input);
  const input = req.body.input;
  const apiKey = "mykey"; // 替换为你的实际API密钥
  const apiUrl = "https://maps.googleapis.com/maps/api/place/autocomplete/json";

  try {
    const response = await axios.get(apiUrl, {
      params: {
        input,
        key: apiKey,
        types: "mosque", // 设置类型为mosque过滤清真寺
        componentRestrictions: {
          country: "uk",
        },
      },
    });

    console.log("server:", response.data.predictions);
    
    const predictions = response.data.predictions.map((prediction) => ({
      id: prediction.place_id,
      name: prediction.description,
    }));

    res.json(predictions);
  } catch (error) {
    console.error("获取自动补全建议出错:", error.message);
    res.status(500).json({ error: "内部服务器错误" });
  }
}

返回数据示例 #

[
  {
    "description": "Sayedabad Bus Terminal Masjid, Dhaka - Mawa Hwy, Dhaka, Bangladesh",
    "matched_substrings": [{}],
    "place_id": "ChIJubFsVbO5VTcRRpdyaZ6sXjE",
    "reference": "ChIJubFsVbO5VTcRRpdyaZ6sXjE",
    "structured_formatting": {
      "main_text": "Sayedabad Bus Terminal Masjid",
      "main_text_matched_substrings": [],
      "secondary_text": "Dhaka - Mawa Hwy, Dhaka, Bangladesh"
    },
    "terms": [{}, {}, {}, {}],
    "types": [
      "mosque",
      "place_of_worship",
      "point_of_interest",
      "establishment"
    ]
  },
  {
    "description": "Sharjah Mosque - Sharjah - United Arab Emirates",
    "matched_substrings": [{}],
    "place_id": "ChIJGb39ZXqL9T4ReU5jj0N0q6c",
    "reference": "ChIJGb39ZXqL9T4ReU5jj0N0q6c",
    "structured_formatting": {
      "main_text": "Sharjah Mosque",
      "main_text_matched_substrings": [],
      "secondary_text": "Sharjah - United Arab Emirates"
    },
    "terms": [{}, {}, {}],
    "types": [
      "mosque",
      "place_of_worship",
      "point_of_interest",
      "establishment"
    ]
  }
]

解决方案 #

1. 修正国家代码 #

Google Places API遵循ISO 3166-1 alpha-2标准，英国的国家代码应为gb而非uk，这是导致区域过滤失效的核心原因。

2. 优化名称提取 #

description字段包含完整地址，应使用structured_formatting.main_text获取纯粹的清真寺名称。

3. 可选：增强区域限定（非必需） #

可添加location和radius参数，指定英国中心坐标（如伦敦：51.5074,-0.1278）和较大半径（如100000米），进一步强化区域过滤效果。

修改后的完整代码 #

import axios from "axios";

export default async function GetMosques(req, res) {
  console.log(req.body.input);
  const input = req.body.input;
  const apiKey = "mykey"; // 替换为你的实际API密钥
  const apiUrl = "https://maps.googleapis.com/maps/api/place/autocomplete/json";

  try {
    const response = await axios.get(apiUrl, {
      params: {
        input,
        key: apiKey,
        types: "mosque",
        componentRestrictions: {
          country: "gb", // 修正为正确的英国国家代码
        },
        // 可选：添加位置和半径强化区域过滤
        location: "51.5074,-0.1278",
        radius: 100000,
      },
    });

    console.log("server:", response.data.predictions);
    
    const predictions = response.data.predictions.map((prediction) => ({
      id: prediction.place_id,
      name: prediction.structured_formatting.main_text, // 提取纯粹名称
    }));

    res.json(predictions);
  } catch (error) {
    console.error("获取自动补全建议出错:", error.message);
    res.status(500).json({ error: "内部服务器错误" });
  }
}

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