Google Nearby Places返回23个地点但地图仅显示12个问题咨询

核心原因1：数据过滤逻辑筛除了大量有效返回结果 #

你代码中对接口返回的地点做了3个强校验，只要有一个不满足就不会被加入渲染数组：

• 必须存在opening_hours字段：谷歌Places接口不会为所有商家返回营业时间，比如新增商家、未上传营业时间的小商家都会缺失该字段，这是最常见的筛除原因
• 必须存在business_status字段
• 不能是临时关闭状态

核心原因2：返回结果计数错误 #

谷歌Nearby Search接口单页最多返回20条结果，你统计到的23条是全局变量placesArray没有在每次请求前清空导致的历史数据累加，本次请求实际返回的结果不足20条，过滤后自然更少。

核心原因3：Marker渲染异常 #

你当前用数组下标作为Marker的唯一key，数组内容变动时会触发React组件复用错误，导致部分Marker无法正常渲染；另外如果多个地点坐标完全一致，Marker会重叠，视觉上看起来只显示了一个。

修复步骤 #

1. 先校准数据统计逻辑
   每次发起接口请求前先清空渲染数组，避免历史数据干扰：

placesArray = []
// 再发起fetch请求
let cafePlaces = await fetch(urlCafe)
// ...后续逻辑

请求完成后打印res.results.length确认接口实际返回的条数，和过滤后的placesArray.length做对比，就能算出有多少条被过滤规则筛掉了。

2. 按需调整过滤规则
   如果不需要严格校验营业时间，可以删除googlePlace.opening_hours的判断；如果允许展示无营业时间的商家，可以调整逻辑如下：

if (
  googlePlace &&
  googlePlace.business_status &&
  googlePlace.business_status != "CLOSED_TEMPORARILY"
) {
  // 处理逻辑，没有opening_hours的话可以给open字段设默认值
  place["open"] = googlePlace.opening_hours?.open_now ?? null;
  // ...其他字段赋值
}

3. 修复Marker渲染问题
   把Marker的key替换为唯一的placeId，避免渲染异常：

<Marker
  coordinate={marker.coordinate}
  title={marker.placeName}
  key={marker.placeId}
  // ...其他属性
/>

如果有坐标重叠问题，可以添加Marker聚合组件，或者给重叠的Marker设置偏移量避免完全覆盖。

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