如何在Google Maps InfoWindow渲染HTML？@react-google-maps/api实现遇阻

我帮你排查了代码里的几个关键问题，这些应该就是导致InfoWindow无法正确渲染HTML内容的原因，咱们一步步来修正：

问题分析与核心修复点 #

• 没必要使用ReactDOMServer.renderToString：@react-google-maps/api的InfoWindow组件本身就支持直接渲染React元素，你用renderToString会把组件转成纯字符串，反而无法被解析成可交互的DOM节点。
• 错误的事件绑定方式：onClick={this.onEventWindowClick(this)}会在组件渲染时立即执行函数，而不是点击时触发，应该改成回调形式。
• 多余的position属性：InfoWindow作为Marker的子组件时，会自动继承Marker的位置，不需要单独设置position。
• 不合理的zIndex值：zIndex={-1}会让InfoWindow被其他元素完全遮挡，应该移除这个设置或者设为正数。
• 易触发的onMouseOut事件：这个事件很容易误触发（比如鼠标移到InfoWindow内容上时），如果不是必须的交互逻辑，建议暂时移除，避免窗口频繁意外关闭。

修改后的完整代码 #

import React, { Component } from 'react';
import { GoogleMap, LoadScript, InfoWindow, Marker } from '@react-google-maps/api'

export class MarkerWithInfoWindow extends React.Component {
  constructor() {
    super();
    this.state = { isOpen: false }
    this.onToggleOpen = this.onToggleOpen.bind(this);
    this.onEventWindowClick = this.onEventWindowClick.bind(this)
  }

  onToggleOpen() {
    this.setState(prevState => ({ isOpen: !prevState.isOpen }));
  }

  onEventWindowClick() {
    // 这里编写你的InfoWindow点击逻辑
    console.log('InfoWindow被点击了');
  }

  render() {
    const imgUrl = this.props.icon;
    return (
      <Marker 
        title={this.props.title} 
        position={this.props.position} 
        icon={{ url: imgUrl }}
        onClick={this.onToggleOpen} // 点击Marker开关窗口，交互更直观
      >
        {this.state.isOpen && (
          <InfoWindow 
            onCloseClick={this.onToggleOpen}
            onClick={() => this.onEventWindowClick()} // 修正事件绑定方式
            pixelOffset={{ width: 25, height: 25 }}
          >
            {/* 直接渲染React元素，无需转字符串 */}
            {this.props.content}
          </InfoWindow>
        )}
      </Marker>
    )
  }
}

额外补充说明 #

如果你的this.props.content是纯HTML字符串（而非React元素），可以用dangerouslySetInnerHTML来渲染：

<div dangerouslySetInnerHTML={{ __html: this.props.content }} />

⚠️ 注意：使用dangerouslySetInnerHTML存在XSS风险，请确保内容来自可信源。

内容的提问来源于stack exchange，提问作者Erik Lyngsøe