向react-google-maps InfoWindow内容添加图片

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

const MapWithInfoWindow = () => {
  const [selectedMarker, setSelectedMarker] = useState(null);
  const [imageURL, setImageURL] = useState('');

  const markers = [
    { id: 1, position: { lat: 37.7749, lng: -122.4194 }, imageURL: 'https://example.com/image1.jpg' },
    { id: 2, position: { lat: 37.7749, lng: -122.4294 }, imageURL: 'https://example.com/image2.jpg' },
    // Add more markers with their respective image URLs
  ];

  const handleMarkerClick = (marker) => {
    setSelectedMarker(marker);
    setImageURL(marker.imageURL);
  };

  const handleInfoWindowClose = () => {
    setSelectedMarker(null);
    setImageURL('');
  };

  return (
    <GoogleMap>
      {markers.map((marker) => (
        <Marker
          key={marker.id}
          position={marker.position}
          onClick={() => handleMarkerClick(marker)}
        />
      ))}
      {selectedMarker && (
        <InfoWindow
          position={selectedMarker.position}
          onCloseClick={handleInfoWindowClose}
        >
          <div>
            <img src={imageURL} alt="Marker Image" />
          </div>
        </InfoWindow>
      )}
    </GoogleMap>
  );
};

export default MapWithInfoWindow;