>我正在尝试在我的 React 应用程序中集成 googlemaps，但它在 javascript 控制台中返回以下错误。
javascript 控制台在尝试集成 Google 地图时返回以下错误。如何解决此问题？
[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.
如何在浏览器中显示谷歌地图？
我有一个具有不同软件包的工作解决方案。
但是，您的代码示例存在一些问题，因此请查看是否可以利用这些建议来解决其中的几个问题。
1. 谷歌地图脚本在头部分
与样式表和字体不同，出于性能原因，脚本应加载在正文的末尾，否则它们将在内容之前加载，从而延长页面加载时间。
另外，不要忘记包括页面标题和其他内容，这些内容通常可以帮助您进行SEO，而这些内容在您的示例中是缺少的。
<!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. 映射自身和用户详细信息
我之前已经成功地使用了另一个名为"react-google-maps"的包，它目前似乎工作正常，所以我将在 UserDetail 示例中添加一个示例。
考虑到你只有一个用于UserDetails的渲染方法，我建议你在这里使用一个纯功能组件。
此外，您可以在此处执行一些操作来帮助简化代码，以及您应该问自己的一些事情。
- 为什么用户详细信息不是驼峰案例？
- 为什么要传递操作来连接方法，当你不在内部的任何地方使用它时，当它可以直接在渲染中使用它时？
您确定真的需要从操作中导入所有内容吗？
从 '.. 导入 { 操作名称 }/动作'
如果您要使用特定的东西，也许这样的事情会更有益。
- 另一方面，这里没有在任何地方使用操作，所以我从我的示例中删除了它们。
为什么谷歌地图文件被命名为google_maps？蛇形大小写应该只用于常量，例如在谷歌地图API键的情况下，它不会改变：
康斯特GOOGLE_MAPS_API_KEY
例：
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);