两次加载谷歌地图时出错，“不能用不同的选项再次调用Loader。”

Question

我的地图使用@googlemaps/react-wrapper，其中一个正在使用heatmap库，另一个则没有，尽管它们位于不同的页面上，但当用户在页面之间导航时，它仍然会崩溃。

Loader must not be called again with different options. {"apiKey":"***","id":"__googleMapsScriptId","libraries":[],"url":"https://maps.googleapis.com/maps/api/js"} !== {"apiKey":"***","id":"__googleMapsScriptId","libraries":["visualization"],"url":"https://maps.googleapis.com/maps/api/js"}

import { Wrapper } from "@googlemaps/react-wrapper";
import { FC } from "react";
import { Route, Switch } from "react-router";


export const Map: FC = () => {
  return (
      <Switch>
        <Route path="/page1" exact>
          <Wrapper apiKey={MAP_API_KEY} libraries={["visualization"]}>
            <MapComponent />
          </Wrapper>
        </Route>
        <Route path="/page2" exact>
              <Wrapper apiKey={MAP_API_KEY}>
                <MapComponent />
            </Wrapper>
        </Route>
      </Switch>
  );
};

MapComponent：

const MapComponent: FC = () => {
  const [map, setMap] = useState<google.maps.Map>();
  const ref = useRef(null);

  useEffect(() => {
    if (ref.current && !map) {
      setMap(
        new window.google.maps.Map(ref.current, {
          center: DEFAULT_MAP_COORDINATES,
        }),
      );
    }

  }, [ref, map]);

  return (
    <div>
      <div ref={ref}  />
    </div>
  );
};

Answer 1

只要在同一屏幕上启动多个实例，就可以通过为谷歌地图提供相同的配置来解决这个问题。

在你的情况下，它是通过同样的道具。

import { Wrapper } from "@googlemaps/react-wrapper";
import { FC } from "react";
import { Route, Switch } from "react-router";


export const Map: FC = () => {
  return (
      <Switch>
        <Route path="/page1" exact>
          <Wrapper apiKey={MAP_API_KEY} libraries={["visualization"]}>
            <MapComponent />
          </Wrapper>
        </Route>
        <Route path="/page2" exact>
              <Wrapper apiKey={MAP_API_KEY} libraries={["visualization"]}>
                <MapComponent />
            </Wrapper>
        </Route>
      </Switch>
  );
};

对于其他可能正在使用useJsApiLoader的人来说

只需确保所有实例中的配置是相同的:您可以找到我在以下问题中解释的情况：如何避免在useJsApiLoader中使用nonce时不能再次使用不同选项调用Loader？