如何为react-google-maps的InfoWindow组件添加图片内容

核心逻辑 #

react-google-maps 封装的 <InfoWindow> 组件不需要调用原生 content 属性传入内容，你在 <InfoWindow> 标签对之间写的所有JSX元素都会自动作为弹窗内容渲染，你之前注释的img标签方向是正确的，只需要修正JSX语法问题和适配弹窗尺寸即可。

修正后的完整代码 #

{showingInfoWindow && selectedPlace === spot._id && <InfoWindow
            className="info-window"
            onCloseClick={onInfoWindowClose}
            position={{lat: spot.lat, lng: spot.lng}}
            // 可选：配置原生属性限制弹窗最大宽度
            options={{
              maxWidth: 300
            }}
            >
              <div className="iw-container">       
                <strong className="iw-title">{spot.name}</strong>
                <div className="iw-content">
                <a href={'https://maps.google.com/?ll=' + spot.lat + ',' + spot.lng} target= "_blank" className="iw-subTitle">{spot.location}</a>
                  <div>Added By: {currentUser.displayName === spot.user ? "Me" : spot.user}</div>
                  <div>{spot.type}</div>
                  <div>{spot.desc}</div>
                  <div>{moment(spot.createdAt).format("MMM Do YYYY")}</div>
                  {/* 修正后的img标签：自闭合、加alt属性、设置固定宽高避免弹窗偏移 */}
                  <img 
                    alt={`${spot.name}实景图`}
                    src={`/server/uploads/${spot.createdAt.split('.')[0]+"Z"}.jpg`}
                    style={{ width: '240px', height: '160px', objectFit: 'cover', marginTop: '8px' }}
                    onLoad={() => {
                      // 可选：图片加载完成后触发重绘，解决弹窗位置偏移问题
                      window.dispatchEvent(new Event('resize'));
                    }}
                  />
                </div>
              </div>
              </InfoWindow>}

可选：原生content属性用法 #

如果你需要和原生谷歌地图API保持一致，通过content属性传入内容，可以通过options属性传递原生配置，示例如下：

<InfoWindow
  position={{lat: spot.lat, lng: spot.lng}}
  onCloseClick={onInfoWindowClose}
  options={{
    // 传入HTML字符串作为内容，不会走React渲染逻辑，事件需手动处理，不推荐优先使用
    content: `
      <div class="custom-info-window">
        <h3>${spot.name}</h3>
        <img src="你的图片地址" alt="${spot.name}" width="200" />
      </div>
    `
  }}
/>

常见问题处理 #

• 图片404：先打印spot.createdAt的值，确认拼接后的路径和服务器存储的文件路径完全匹配，也可以先用公开在线图片地址测试逻辑通顺后，再替换成本地上传路径
• 弹窗位置偏移：给img设置固定宽高、添加onLoad触发重绘的逻辑可以解决绝大多数偏移问题，仍有异常可以给InfoWindow添加动态key，如key={info-window-${spot._id}}，每次切换点位强制重新渲染弹窗

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