use-places-autocomplete边界限制失效问题排查求助

核心错误点 #

• 未用new实例化LatLngBounds：你直接调用window.google.maps.LatLngBounds()而非用new创建实例，导致生成的不是有效的边界对象，Google Maps API无法识别该参数。
• 边界参数顺序颠倒：LatLngBounds构造函数要求西南坐标（southwest）在前，东北坐标（northeast）在后，但你把东北坐标放在了第一个参数位置，导致边界范围完全错误。
• 变量命名易混淆：用n代表东北、w代表西南的命名逻辑不清晰，极易引发参数传递错误。

修复后的代码 #

1. 修正边界数据存储逻辑 #

setBounds({
  sw: results[0].geometry.bounds.getSouthWest(), // 明确存储西南坐标
  ne: results[0].geometry.bounds.getNorthEast()  // 明确存储东北坐标
})

2. 修正requestOptions中的bounds配置 #

requestOptions: {
  types: ["geocode"],
  fields: [
    "name",
    "address_components",
    "geometry.location",
    "place_id",
    "formatted_address",
  ],
  // 正确实例化LatLngBounds，按sw→ne的顺序传递参数
  bounds: bounds?.sw && bounds?.ne ? new window.google.maps.LatLngBounds(bounds.sw, bounds.ne) : undefined,
  componentRestrictions: {
    country: "ke",
  },
  initOnMount: true,
  cache: false,
},

额外验证建议 #

• 控制台打印bounds对象，确认sw和ne都是带有lat()、lng()方法的有效LatLng实例。
• 若bounds初始值可能为undefined，保留代码中的判断逻辑，避免创建空边界对象引发API报错。

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