Reactjs react-google-maps 未定义
Posted
技术标签:
【中文标题】Reactjs react-google-maps 未定义【英文标题】:Reactjs react-google-maps undefined 【发布时间】:2018-01-26 14:23:57 【问题描述】:我正在使用 react-google-maps 包 https://github.com/tomchentw/react-google-maps 和 https://www.npmjs.com/package/react-google-maps。我有一个错误提示:
./src/App.js Line 31: 'google' is not defined no-undef Line 32: 'google' is not defined no-undef Line 37: 'google' is not defined no-undef Line 42: 'google' is not defined no-undef Line 44: 'google' is not defined no-undef
这是我在错误中的一行:
state =
origin: new google.maps.LatLng(41.8507300, -87.6512600),
destination: new google.maps.LatLng(41.8525800, -87.6514100),
directions: null,
componentDidMount()
const DirectionsService = new google.maps.DirectionsService();
DirectionsService.route(
origin: this.state.origin,
destination: this.state.destination,
travelMode: google.maps.TravelMode.DRIVING,
, (result, status) =>
if (status === google.maps.DirectionsStatus.OK)
this.setState(
directions: result,
);
else
console.error(`error fetching directions $result`);
);
所有的“谷歌”都是错误的。
【问题讨论】:
【参考方案1】:答案是我没有将这一行 /* global google */
包含在我的文件顶部。
【讨论】:
能详细回答吗? 这个错误是由 Eslint 引起的,你可以尝试在文件顶部添加 /* global google */ 来禁用 ESlint。【参考方案2】:如果未定义 google
,则说明您未正确加载 Google Maps API。正如react-google-maps
's README 中解释的那样,将它放在你的 html 在你的 React 组件代码加载之前:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY_GOES_HERE"></script>
【讨论】:
如果您在 HTML 中添加脚本标签,然后在渲染函数中,当您将道具传递给组件时,它需要一个道具googleMapURL
并使用 API 密钥传递 URL 将生成此警告:You have included the Google Maps API multiple times on this page. This may cause unexpected errors.
跨度>
【参考方案3】:
你也可以只包含窗口引用来解决错误,至少在默认的 create-react-app 配置中是这样
new window.google.maps.LatLng(41.8507300, -87.6512600)
【讨论】:
以上是关于Reactjs react-google-maps 未定义的主要内容,如果未能解决你的问题,请参考以下文章
React-Google-Maps 显示两个标记,一个在原始位置,另一个标记跟随地图的新中心 onDrag
如何使用 react-google-maps 通过单击在地图上添加标记?