将GoogleMaps集成到React App中的问题 [英] Issue in integrating GoogleMaps in React App
问题描述
javascript控制台在尝试集成时返回以下错误Google地图。我该如何解决这个问题？
[Violation]添加了非被动事件侦听器到一个阻止滚动的轮子'事件。考虑将事件处理程序标记为被动，以使页面更具响应性。
js？key = APIKEY：99
[违规]为滚动阻止的'mousewheel'事件添加了非被动事件侦听器。考虑将事件处理程序标记为被动，以使页面更具响应性。
util.js：40
[违规]为滚动阻止的'touchstart'事件添加非被动事件侦听器。考虑将事件处理程序标记为被动，以使页面更具响应性。
util.js：40
[违规]为滚动阻止的'touchmove'事件添加了非被动事件侦听器。考虑将事件处理程序标记为被动，以使页面更具响应性。
如何在浏览器中显示Google地图？
我有一个不同包的工作解决方案。
然而，你的代码示例有几个问题，所以请看看你是否可以利用这些建议来解决这个问题。
1。谷歌地图脚本部分
与样式表和字体不同，脚本应该在主体的最后加载，原因，因为它们会在内容之前加载，从而延长页面加载时间。
另外，不要忘记包含页面标题和其他内容，这通常会帮助您在您的示例中缺少SEO。
<！DOCTYPE html>
< html>
< head>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< link rel =stylesheethref =/ style / style.css>
< link rel =stylesheethref =https://cdn.rawgit.com/twbs/bootstrap/48938155eb24b4ccdde09426066869504c6dab3c/dist/css/bootstrap.min.css>
< title>页面标题< /标题>
< / head>
< body>
< div class =container>< / div>
< script src =https://maps.googleapis.com/maps/api/js?key=APIKEYtype =text / javascript>< / script>
< script src =./ bundle.js>< / script>
< / body>
< / html>
2。映射本身&用户详细信息
我之前成功地使用了另一个名为'react-google-maps'的包，此时似乎正在正常工作，在UserDetail示例中添加一个示例
考虑到您只有UserDetails的渲染方法，我建议您在这里使用纯粹的功能组件。 / p>
另外，您可以在这里做一些事情来帮助简化代码，以及一些您应该自问的事情。
- 为什么 userdetail 不是 camelCase ？
-
- 为什么你要传递动作来连接方法，当你不在内部任何地方使用它并直接在渲染中使用时？ >
您确定您确实需要从行动中导入所有内容吗？
从'../actions'导入{actionName}
如果你打算使用某些特定的东西，那么类似这样的东西会更有益。
在另一个笔记中，动作不会在这里的任何地方使用，所以我将它们从我的示例中删除。 -
为什么Google地图文件名为 google_maps ？ Snake案例应该只用于常量，例如在Google Maps API密钥不会更改的情况下：
const GOOGLE_MAPS_API_KEY
例子：
import从'react' ;
从'react-redux'导入{connect};
从'google-map-react'导入GoogleMap
$ b $常量UserDetail =（道具）=> {
const {纬度，经度，电子邮件，地址，countryCode} = props.userDetail;
const googleMapProps = {
bootstrapURLKeys：{key：yourKey}，
center：[parseFloat（latitude），parseFloat（longitude）]，
zoom：12
};
const noDetails =< div>无数据< / div>;
const hasDetails =（
< div>
< GoogleMap {... googleMapProps}>< / GoogleMap>
< p>电子邮件：{email}< ; / p>
< p>地址：{地址}< / p>
< p>纬度：{纬度}< {longitude}< / p>
< p>国家代码：{countryCode}< / p>
< / div>
）;
返回props.userDetail
？ hasDetails
：noDetails;
}
函数mapStateToProps（state）{
const {userDetail} = state.auth;
return {userDetail};
}
导出默认连接（mapStateToProps）（UserDetail）;
I am trying to integrate googlemaps in my React App.But it returns the following error in javascript console.
The javascript console returns the following error while trying to integrate Google Maps.How can I resolve that issue?
[Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive.
js?key=APIKEY:99
[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.
util.js:40
[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.
util.js:40
[Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive.
How can I display Google Maps in my browsers?
I have a working solution with a different package.
However, there are a few issues with your code example, so please see if you can utilise these suggestions for resolving several issues with it.
1. Google maps script in head section
Unlike stylesheets and fonts, scripts should be loaded at the end of the body, for peformance reasons, as they will otherwise be loaded before the content, prolonging the page load.
Also, don't forget to include page title and other things, that usually help you with SEO, which are missing in your example.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/style/style.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/48938155eb24b4ccdde09426066869504c6dab3c/dist/css/bootstrap.min.css">
<title>page title</title>
</head>
<body>
<div class="container"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=APIKEY" type="text/javascript"></script>
<script src="./bundle.js"></script>
</body>
</html>
2. Map itself & User details
I've previously successfully used another package called 'react-google-maps' that seems to be working properly at this moment, so I'll add an example with that one inside the UserDetail example
Considering that you only have a render method for UserDetails, I would suggest that you use a pure functional component here.
Also, there are a few things you can do here to help with code brevity, and a few thing you should ask yourself.
- why userdetail is not camelCase?
- why are you passing actions to connect method, when you aren't using it anywhere inside and when it can be used directly in the render?
Are you sure you really need to import everything from actions?
import { actionName } from '../actions'
Maybe something like this would be more beneficial if you are going to use something specific.
- On another note, actions aren't used anywhere here, so I've removed them from my example.
why is google maps file named google_maps? Snake case should be only used for constants, for example in the case of google maps api key that will not change:
const GOOGLE_MAPS_API_KEY
Example:
import React from 'react';
import { connect } from 'react-redux';
import GoogleMap from 'google-map-react'
const UserDetail = (props) => {
const { latitude, longitude, email, address, countryCode } = props.userDetail;
const googleMapProps = {
bootstrapURLKeys: { key: "yourKey" },
center: [parseFloat(latitude), parseFloat(longitude)],
zoom: 12
};
const noDetails = <div>no data</div>;
const hasDetails = (
<div>
<GoogleMap {...googleMapProps}></GoogleMap>
<p>Email: {email}</p>
<p>Address: {address}</p>
<p>Latitude: {latitude}</p>
<p>Longitude: {longitude}</p>
<p>Country Code: {countryCode}</p>
</div>
);
return props.userDetail
? hasDetails
: noDetails;
}
function mapStateToProps(state){
const { userDetail } = state.auth;
return { userDetail };
}
export default connect(mapStateToProps)(UserDetail);
这篇关于将GoogleMaps集成到React App中的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
