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

Question

我在我的地图中使用

@googlemaps/react-wrapper

，其中一个正在使用热图库，而另一个则没有，尽管它们位于不同的页面上，但当用户在页面之间导航时，它仍然会崩溃

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

地图组件：

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

只需确保所有实例中的配置都相同： 你可以在这个问题中找到我的案例解释：How to避免 'Loader must not be called again with different options' error when using nonce in useJsApiLoader?

Answer 2

在我的情况下，每当我对 useJsApiLoader 进行添加或修改时，问题都会持续发生。修复很简单：只需重新加载服务器，问题就可以解决。本质上，每当您调整 useJsApiLoader 时，您都需要刷新开发服务器。通过按 Ctrl+C 然后再次运行“yarn dev”可以轻松完成此操作。