Google 地图相关项目中的图标未锚定到其特定位置

Question

我目前正在尝试复制一个 Web 应用程序项目，该项目使用 NASA 的公共 API 数据跟踪各种野火的位置。我已经达到了图标以初始正确的纬度和经度加载的程度，但是在平移或缩放地图时它们不会保持其位置。我有理由相信这可能与 API 有关，并且可能需要某些权限？如有任何其他问题/需要信息，请联系！ （我没有提供 Google Maps API 密钥）。

App.js：

import Map from "./components/Map";
import Loader from "./components/Loader";
import React from "react";
//Use axios instead?
function App() {
  const [eventData, setEventData] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchEvents = async () => {
      setLoading(true);
      //Add to .env file?
      const res = await fetch("https://eonet.gsfc.nasa.gov/api/v2.1/events");
      const { events } = await res.json();

      setEventData(events);
      setLoading(false);
    };

    fetchEvents();
  }, []);

  return <div>{!loading ? <Map eventData={eventData} /> : <Loader />} </div>;
}

export default App;

Map.js

import GoogleMapReact from "google-map-react";
import LocationMarker from "./LocationMarker";

//Unable to restrict to env due to costs, hence visible API key
// process.env.GOOGLE_MAPS_API_KEY 
//RESOLVE ICONS NOT STAYING IN PLACE!
const Map = ({ eventData, center, zoom }) => {

  const markers = eventData.map((ev, index) => {
    if(ev.categories[0].id === 8){
      return  <LocationMarker key={index} lat={ev.geometries[0].coordinates[1]} lng={ev.geometries[0].coordinates[0]}/>
    }
    return null
  })
  return (
    <div className="map">
      <GoogleMapReact
        bootstrapURLKeys={{ key: ''}}
        defaultCenter={ center }
        defaultZoom={ zoom }
      >
        {markers}
      </GoogleMapReact>
    </div>
  );
};

Map.defaultProps = {
  center: {
    lat: -37.6343,
    lng: 145.0605
  },
  zoom: 4
}

export default Map;

index.css

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  overflow: hidden;
}

.header {
  padding: 10px;
  background-color: firebrick;
  color: #fff;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 100;
}

.header h1 {
  font-size: 25px;
  padding: 0;
  margin: 0;
  text-align: center;
}

.map {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.location-icon{
  font-size: 2rem;
  color: red;
}

.loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.loader img{
  width: 400px;
}

.loader h1 {
  margin-top: -100px;
}

Answer 1

通过删除 gmaps npm 包的 React v18 的严格模式可以简单地解决这个问题。