Reactjs 在React应用程序中集成GoogleMaps的问题
我试图在我的React应用程序中集成googlemaps，但它在javascript控制台中返回以下错误 javascript控制台在尝试集成Google地图时返回以下错误。我如何解决该问题Reactjs 在React应用程序中集成GoogleMaps的问题,reactjs,google-maps,google-maps-api-3,google-maps-api-2,Reactjs,Google Maps,Google Maps Api 3,Google Maps Api 2,我试图在我的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 mor
[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>
页面标题
- 为什么userdetail不是camelCase
- 为什么要将动作传递给connect方法，而在内部的任何地方都不使用它，并且可以在渲染中直接使用它
- 你确定你真的需要从actions导入所有内容吗 从“../actions”导入{actionName} 如果你打算使用一些特定的东西，也许像这样的东西会更有益
- 另一方面，这里的任何地方都没有使用动作，所以我将它们从示例中删除
- 为什么谷歌地图文件命名为谷歌地图？Snake case应仅用于常量，例如在google maps api密钥不变的情况下： const谷歌地图API密钥
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);
从“React”导入React；
从'react redux'导入{connect}；
从“谷歌地图反应”导入谷歌地图
const UserDetail=（道具）=>{
const{纬度、经度、电子邮件、地址、国家代码}=props.userDetail；
常量googleMapProps={
bootstrapURLKeys:{key:“yourKey”}，
中心：[parseFloat（纬度），parseFloat（经度）]，
缩放：12
};
const noDetails=无数据；
常数hasDetails=(
电子邮件：{Email}
地址：{Address}
纬度：{纬度}
经度：{经度}
国家代码：{countryCode}
);
返回props.userDetail
？有详细资料吗
：noDetails；
}
函数MapStateTops（状态）{
const{userDetail}=state.auth；
返回{userDetail}；
}
导出默认连接（MapStateTops）（UserDetail）；