我的反应谷歌地图脚本不加载 [英] My script for react-google-maps don't loads

问题描述

我想渲染组件搜索框，我完全复制了它在我的应用程序中，但我得到一个错误：

  error第44行：'google'未定义no-undef第79行： 'google'没有定义no-undef 
  

我已经加载了我的

 < script async defer src =https://maps.googleapis.com/maps/api/js?key=MY_KEY_IS_HERE>< / script> ; 
  

放入我的 index.html 但它无论如何显示我错误。难道， index.html 无法加载我的脚本？

我使用create-react-app创建了我的应用程序

解决方案

这可能是你的linter抱怨一个未定义的变量。由于'google'是在一个脚本中定义的，该脚本使用< script> 标签从外部加载，因此您的linter不知道它。尝试为变量添加一个异常。在 eslint 中，您可以在访问变量的文件顶部添加此行：
/ * global google * /
但是由于您的 async 属性< script> 标记，则在执行maps API之前，您的脚本仍可能运行。一种解决方案是删除 async 和 defer 属性。但是如果你真的想要map API异步加载，那么你可以尝试一个额外的库，如 react-async-script-loader 。
以下是有关类似问题的讨论。 p>

i want to render the component Searchbox, i copied it exactly in my app, but i get an error:

error  Line 44:  'google' is not defined  no-undef   Line 79:  'google' is not defined  no-undef 

i already loaded my

<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_KEY_IS_HERE"></script>

into the head of my index.html but it showes me the error anyway. Could it be, that index.html can't load my script ?

i created my app with create-react-app

解决方案

It is probably your linter complaining about an undefined variable. Because 'google' is defined in a script that loads externally with <script> tag, your linter doesn't know about it. Try adding an exception for the variable. In eslint you would add this line at the top of the file where you access the variable: /*global google*/ But since you have the async attribute in your <script> tag, your script may still run before the maps API is executed. One solution would be to remove the async and defer attributes. But if you really want the maps API to load asynchronously, then you could try an additional library, like react-async-script-loader. Here's a discussion about a similar problem.

这篇关于我的反应谷歌地图脚本不加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！