Question

React Google Maps API（ReferenceError：google 未定义）

2021-10-22

15335

javascript reactjs react-google-maps-api

我正在使用 react-google-maps/api 节点模块。我需要将 zoomControlOptions 的值设置为 TOP_LEFT ，但最终收到此错误 Uncaught ReferenceError: google is not defined 。这是存储库的链接。

我在这里收到错误

const options = {
  zoomControl: true,
  mapTypeControl: false,
  minZoom: 2,
  streetViewControl: false,
  zoomControlOptions: {
    position: google.maps.ControlPosition.TOP_LEFT, // google is undefined here
  },
};

请帮助我 :)

Answer 1

发生这种情况的原因是您在 Google 地图加载之前对其进行了渲染。

不要使用 LoadScript ，而要使用 useJsApiLoader 。

import {
  GoogleMap,
  MarkerF,
  useJsApiLoader,
} from "@react-google-maps/api";


function RenderMap() {
  const { isLoaded } = useJsApiLoader({ googleMapsApiKey });
  if (!isLoaded) {
    return null;
  }
  // google is guaranteed to be defined now
  return <GoogleMap>...</GoogleMap>
}

useJsApiLoader 具有以下类型签名：

declare function useJsApiLoader({ id, version, nonce, googleMapsApiKey, language, region, libraries, preventGoogleFontsLoading, mapIds, authReferrerPolicy, }: UseLoadScriptOptions): {
    isLoaded: boolean;
    loadError: Error | undefined;
};

Answer 2

尝试像这样明确定义 google 变量：

const google = window.google;

此外，您也可以读出这个答案

Answer 3

尝试在组件内部定义“选项”并添加“窗口”，如

position: window.google.maps.ControlPosition.TOP_LEFT

此外，您也可以只放一个数字

BOTTOM: 11
BOTTOM_CENTER: 11
BOTTOM_LEFT: 10
BOTTOM_RIGHT: 12
CENTER: 13
LEFT: 5
LEFT_BOTTOM: 6
LEFT_CENTER: 4
LEFT_TOP: 5
RIGHT: 7
RIGHT_BOTTOM: 9
RIGHT_CENTER: 8
RIGHT_TOP: 7
TOP: 2
TOP_CENTER: 2
TOP_LEFT: 1
TOP_RIGHT: 3