@react-google-maps/api 谷歌地图标记不显示反应 JS答案

【问题标题】：@react-google-maps/api Google maps Marker not showing react JS@react-google-maps/api 谷歌地图标记不显示反应 JS
【发布时间】：2022-08-19 17:57:37
【问题描述】：

任何人都可以帮忙吗？我的地图正在渲染并且工作正常，但我的标记不起作用我已经为此奋斗了 4 个小时。

    import React from \"react\";
    import { GoogleMap, Marker } from \"@react-google-maps/api\";

    function Map({ lati, longi }) {
      const position = {
        // lat: lati,
        // lng: longi,
        lat: 33.7295198,
        lng: 73.0371536,
      };

      const onLoad = (marker) => {
        console.log(\"marker: \", marker);
      };

      return (
        <>
          <GoogleMap
            zoom={18}
            center={{ lat: lati, lng: longi }}
            mapContainerClassName=\"map-container\"
          >
            <Marker onLoad={onLoad} position={position} />
          </GoogleMap>
        </>
      );
    }

    export default Map;

代替 Marker 使用 import MarkerF

标签： reactjs google-maps react-google-maps-api

【解决方案1】：

IMO，这可能是因为严格模式会两次渲染应用程序，所以我们在第一次渲染时创建的标记在下一次渲染时不会重新创建。

所以，只需禁用严格模式通过删除React.StrictMode从你的根.render通过改变这个：

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

进入这个：

root.render(<App />);

然后，您可以通过确保谷歌地图在渲染地图之前已加载对象：

应用程序.js

import { useEffect } from "react";
import { useJsApiLoader } from "@react-google-maps/api";
import Map from "./Map";

function App() {
  const { isLoaded } = useJsApiLoader({
    id: "google-map-script",
    googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY,
  });

  useEffect(() => {
    console.log(isLoaded);
  }, [isLoaded]);

  return <div>{isLoaded && <Map lati={-6.2297465} longi={106.829518} />}</div>;
}

export default App;

地图.js

import React from "react";
import { GoogleMap, Marker } from "@react-google-maps/api";

function Map({ lati, longi }) {
  const position = {
    lat: -6.175878,
    lng: 106.827196,
  };

  const onLoad = (marker) => {
    console.log("marker: ", marker);
  };

  return (
    <>
      <GoogleMap
        zoom={12}
        center={{ lat: lati, lng: longi }}
        mapContainerStyle={{ width: "100%", height: "100vh" }}
      >
        <Marker onLoad={onLoad} position={position} />
      </GoogleMap>
    </>
  );
}

export default Map;

【讨论】：