React Google Maps API (ReferenceError: google is not defined)答案

【问题标题】：React Google Maps API (ReferenceError: google is not defined)React Google Maps API (ReferenceError: google is not defined)
【发布时间】：2021-12-09 01:54:39
【问题描述】：

我正在使用react-google-maps/api 节点模块。我需要将zoomControlOptions 的值设置为TOP_LEFT，但我最终得到了这个错误Uncaught ReferenceError: google is not defined。这是回购的link。

我在这里遇到了错误

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

请帮帮我:)

【问题讨论】：

是的@AlexanderPrisazhny 我做到了
抱歉，删除了我最初的评论，因为它不相关。解决方法可能是使用 { position: 10 }
您可能还想等到脚本完成加载，这 (react-google-maps-api-docs.netlify.app/#useloadscript) 可能会有所帮助。加载脚本后，您可以使用一些微调器来映射和使用 google 全局对象。正如文档所说，它适用于 React 16.8+

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

【解决方案1】：

尝试像这样显式定义 google 变量：

const google = window.google;

另外，你也可以读出this的答案

【讨论】：

嘿@AhmCho 我也试过了，它不起作用
我正在关注此文档react-google-maps-api-docs.netlify.app/#usejsapiloader，但我仍然无法获得解决方案

【解决方案2】：

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

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

【讨论】：