react-google-maps调用空的信息窗口

Question

我在第一次调用InfoWindow时遇到问题，它调用了两次，一次没有任何文本/信息，第二个infoWindow拥有正确的我的信息（屏幕上的数字2）。如果我要单击另一个我的Markeк，则此空的InfoWindow将保留在第一位。但是，如果我尝试关闭空白窗口并打开任何标记，则该空白窗口将再次在新位置显示。

我的代码：

    function MapCreator() {
  const [selectedPoint, setselectedPoint] = useState(null);
  const [data,setData] = useState([]);

  useEffect(() => {
    axios.get('api/coordinates')
    .then(values=>{
        console.log(values.data);
        setData(values.data);
    })
    const listener = e => {
      if (e.key === "Escape") {
        setselectedPoint(null);
      }
    };
    window.addEventListener("keydown", listener);

    return () => {
      window.removeEventListener("keydown", listener);
    };
  }, []);
  return (
    <GoogleMap
      defaultZoom={14}
      defaultCenter={{ lat: 50.444571, lng: 30.559099 }}
    >
      {data.map(park => (
        <Marker
          key={park._id}
          position={{
            lat: park.coordinates.latitude,
            lng: park.coordinates.longitude
          }}
          onClick={() => {
            setselectedPoint(park);
          }}
          icon={{
            url: nfcIcon,
            scaledSize: new window.google.maps.Size(60, 60)
          }}
        />
      ))}

      {selectedPoint && (
        <InfoWindow
          onCloseClick={() => {
            setselectedPoint(null);
          }}
          position={{
            lat: selectedPoint.coordinates.latitude,
            lng: selectedPoint.coordinates.longitude
          }}
        >
          <div>
                <h2>Device ID: {selectedPoint.identificatorNFC}</h2>
                <p>Date: {new Date(selectedPoint.date) .toUTCString()}</p>
          </div>
        </InfoWindow>
      )}
    </GoogleMap>
  );
}

const MapWrapped = withScriptjs(withGoogleMap(MapCreator));

export default function App() {
  return (
    <div style={{ width: `100%`, height: "100vh" }}>
      <MapWrapped
        googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=${
        keys.googleApi
        }`}
        loadingElement={<div style={{ height: `100%` }} />}
        containerElement={<div style={{ height: `100%` }} />}
        mapElement={<div style={{ height: `100%` }} />}
      />
    </div>
  );
}

Answer 1

Tbh，我在您的代码中没有看到任何问题，但我建议您尝试一下：

  function MapCreator() {
  const [selectedPoint, setselectedPoint] = useState(null);
  const [data,setData] = useState([]);

  useEffect(() => {
    axios.get('api/coordinates')
    .then(values=>{
        console.log(values.data);
        setData(values.data);
    })
    const listener = e => {
      if (e.key === "Escape") {
        setselectedPoint(null);
      }
    };
    window.addEventListener("keydown", listener);

    return () => {
      window.removeEventListener("keydown", listener);
    };
  }, []);
  return (
    <GoogleMap
      defaultZoom={14}
      defaultCenter={{ lat: 50.444571, lng: 30.559099 }}
    >
      {data.map(park => (
        <Marker
          key={park._id}
          position={{
            lat: park.coordinates.latitude,
            lng: park.coordinates.longitude
          }}
          onClick={() => {
            setselectedPoint(park);
          }}
          icon={{
            url: nfcIcon,
            scaledSize: new window.google.maps.Size(60, 60)
          }}
        >
         {selectedPoint && selectedPoint._id === park._id && (
           <InfoWindow onCloseClick={() => setselectedPoint(null)}
           >
             <div>
                <h2>Device ID: {selectedPoint.identificatorNFC}</h2>
                <p>Date: {new Date(selectedPoint.date) .toUTCString()}</p>
             </div>
           </InfoWindow>
         )}
        </Marker>
      ))}

    </GoogleMap>
  );
}

const MapWrapped = withScriptjs(withGoogleMap(MapCreator));

export default function App() {
  return (
    <div style={{ width: `100%`, height: "100vh" }}>
      <MapWrapped
        googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=${
        keys.googleApi
        }`}
        loadingElement={<div style={{ height: `100%` }} />}
        containerElement={<div style={{ height: `100%` }} />}
        mapElement={<div style={{ height: `100%` }} />}
      />
    </div>
  );
}