react-google-maps中的多个信息窗口无法传递标记id

import React, { useState } from 'react';

const MyMapComponent = () => {
  const [selectedMarkerId, setSelectedMarkerId] = useState(null);

  // 其他代码...

  return (
    // 渲染地图组件和标记
  );
};

export default MyMapComponent;

import React, { useState } from 'react';
import { Marker, InfoWindow } from 'react-google-maps';

const MyMapComponent = () => {
  const [selectedMarkerId, setSelectedMarkerId] = useState(null);

  const handleMarkerClick = (markerId) => {
    setSelectedMarkerId(markerId);
  };

  // 其他代码...

  return (
    // 渲染地图组件和标记
    <Marker
      position={{ lat: 37.7749, lng: -122.4194 }}
      onClick={() => handleMarkerClick('marker1')}
    />
    <Marker
      position={{ lat: 37.7739, lng: -122.4312 }}
      onClick={() => handleMarkerClick('marker2')}
    />
    // 其他标记...
  );
};

export default MyMapComponent;

import React, { useState } from 'react';
import { Marker, InfoWindow } from 'react-google-maps';

const MyMapComponent = () => {
  const [selectedMarkerId, setSelectedMarkerId] = useState(null);

  const handleMarkerClick = (markerId) => {
    setSelectedMarkerId(markerId);
  };

  // 其他代码...

  return (
    // 渲染地图组件和标记
    <Marker
      position={{ lat: 37.7749, lng: -122.4194 }}
      onClick={() => handleMarkerClick('marker1')}
    >
      {selectedMarkerId === 'marker1' && (
        <InfoWindow>
          {/* 在这里显示相关信息 */}
        </InfoWindow>
      )}
    </Marker>
    <Marker
      position={{ lat: 37.7739, lng: -122.4312 }}
      onClick={() => handleMarkerClick('marker2')}
    >
      {selectedMarkerId === 'marker2' && (
        <InfoWindow>
          {/* 在这里显示相关信息 */}
        </InfoWindow>
      )}
    </Marker>
    // 其他标记...
  );
};

export default MyMapComponent;