react-google-maps 调用空 InfoWindow

Question

我在第一次调用 InfoWindow 时遇到问题，它调用了 2 次，其中一次没有任何 text/info，而第二个 infoWindow 已更正我的信息（屏幕上的数字 2）。如果我将单击另一个我的市场，这个空的信息窗口将保留在第一位。但是如果我尝试关闭空的 window 并打开我的任何标记，这个空的 window 将再次显示在一个新的地方。

我的代码：

    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

老实说，我在你的代码中没有发现任何问题，但我建议试试这个：

  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>
  );
}

react-google-maps 调用空 InfoWindow

react-google-maps calls empty InfoWindow

google-maps

google-maps-markers

reactjs