@react-google-maps/api中Marker不显示的React JS问题求助

下面是针对你遇到的Marker无法显示问题的排查和修复方案：

1. 检查Marker是否在地图视野范围内 #

你当前代码里，地图的center使用的是传入的lati和longi，但Marker的位置是固定的{ lat: 33.7295198, lng: 73.0371536 }。如果这两组坐标相差较大，Marker会处于当前地图视野之外，自然看不到。

• 临时测试：把地图的center改成和Marker一致的位置，验证是否能显示：

<GoogleMap
  zoom={18}
  center={position} // 替换为Marker的position
  mapContainerClassName="map-container"
>

• 正式处理：确保Marker的position和地图center是你需要的目标坐标，或者通过fitBounds方法让地图自动适配Marker位置。

2. 确认地图容器的样式配置 #

如果map-container类没有设置宽高，地图可能仅渲染了极小的区域，Marker也会被隐藏。检查你的CSS样式：

.map-container {
  width: 100%;
  height: 500px; /* 设置具体高度，比如500px或100vh */
}

3. 检查Marker的基础配置正确性 #

• 确保position对象的属性名是小写的lat和lng，你当前代码是正确的，但如果误写成大写（Lat/Lng）会直接导致Marker失效。
• 查看onLoad的控制台输出：如果能打印出marker实例，说明Marker已创建，只是视觉不可见，重点排查视野和样式问题；如果没有打印，需检查组件渲染逻辑是否存在问题。

4. 验证Google Maps API权限 #

虽然地图能正常渲染，但要确认你的API密钥已启用Maps JavaScript API，且没有设置IP限制导致Marker功能受限，可以在Google Cloud控制台的API库中核对配置。

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