使用react-google-maps时地图Marker无法显示的问题求助

我仔细看了你的代码场景，总结了几个大概率导致Marker不显示的原因，给你逐个排查方案：

1. 确认Google Maps API密钥配置正确 #

react-google-maps依赖有效的Google Maps API密钥才能正常加载地图组件，而且你需要在Google Cloud控制台里启用Maps JavaScript API，同时确保密钥没有设置错误的访问限制（比如HTTP referrer限制不对）。如果密钥无效或API未启用，不仅标记点，甚至地图本身都可能加载异常。

2. 检查坐标格式是否正确 #

你的代码里用了lat: park.endPoint.coordinates[1], lng: park.endPoint.coordinates[0]，这是假设coordinates的顺序是**[经度, 纬度]**（很多地理数据格式比如GeoJSON是这个顺序）。但如果你的数据实际是[纬度, 经度]，那标记点就会跑到错误的位置（甚至海洋里），看起来像是没显示。

你可以先把坐标换成固定值测试，比如纽约的坐标：

position={{ lat: 40.7128, lng: -74.0060 }}

如果固定坐标能显示标记，就说明你的原始坐标顺序有问题。

3. 确保Marker在GoogleMap组件内部渲染 #

Marker组件必须作为GoogleMap的子组件存在，不能放在外部。如果你的代码里Marker被渲染到了GoogleMap之外，肯定不会显示。

4. 校验数据有效性 #

要确认park.endPoint.coordinates是有效的数组且包含两个数字，避免因为数据未加载、格式错误导致的渲染问题。可以加个条件判断：

{parks.map(park => {
  // 跳过无效数据
  if (!park.endPoint?.coordinates || park.endPoint.coordinates.length !== 2) {
    return null;
  }
  
  return (
    <Marker
      key={park.trackingId}
      position={{ 
        lat: park.endPoint.coordinates[1], 
        lng: park.endPoint.coordinates[0] 
      }}
      onClick={() => setSelectedPark(park)}
    />
  );
})}

修正后的示例代码片段 #

import { GoogleMap, Marker } from 'react-google-maps';

// 组件内渲染部分
<GoogleMap
  defaultZoom={10}
  defaultCenter={{ lat: 39.9042, lng: 116.4074 }} // 用北京坐标做示例中心
  // 如果是通过LoadScript加载API，确保在那里传入正确的key
>
  {parks.map(park => {
    if (!park.endPoint?.coordinates || park.endPoint.coordinates.length !== 2) {
      return null;
    }
    const [lng, lat] = park.endPoint.coordinates; // 解构更清晰
    return (
      <Marker
        key={park.trackingId}
        position={{ lat, lng }}
        onClick={() => setSelectedPark(park)}
      />
    );
  })}
</GoogleMap>

按照上面的步骤排查，应该能解决标记点不显示的问题。

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