在 React App 中集成 GoogleMaps 的问题答案

【问题标题】：Issue in integrating GoogleMaps in React App在 React App 中集成 GoogleMaps 的问题
【发布时间】：2018-02-05 15:18:43
【问题描述】：

我正在尝试将 googlemaps 集成到我的 React 应用程序中。但它在 javascript 控制台中返回以下错误。

尝试集成 Google 地图时，javascript 控制台返回以下错误。我该如何解决该问题？

       [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.

如何在浏览器中显示 Google 地图？

【问题讨论】：

标签： reactjs google-maps google-maps-api-3 google-maps-api-2

【解决方案1】：

我有一个使用不同软件包的有效解决方案。

但是，您的代码示例存在一些问题，因此请看看您是否可以利用这些建议来解决它的几个问题。

1. head 部分中的 Google 地图脚本

与样式表和字体不同，出于性能原因，脚本应在正文末尾加载，否则它们将在内容之前加载，从而延长页面加载时间。

另外，不要忘记包含页面标题和其他内容，这通常可以帮助您进行 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 的渲染方法，我建议你在这里使用纯函数式组件。

此外，您可以在这里做一些事情来帮助代码简洁，还有一些事情您应该问自己。

为什么 userdetail 不是 camelCase？
为什么要将操作传递给 connect 方法，而不是在内部任何地方使用它，而它可以直接在渲染中使用？
您确定确实需要从操作中导入所有内容吗？

从 '../actions' 导入 { actionName }

如果您要使用特定的东西，也许这样的东西会更有益。
另一方面，此处未使用操作，因此我已将其从示例中删除。
为什么 google 地图文件名为 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);

【讨论】：

我已经尝试过你的代码......我已经使用了你提到的 google-map-react。它仍然有同样的问题......
[Violation] 向阻止滚动的“wheel”事件添加了非被动事件侦听器。考虑将事件处理程序标记为“被动”以使页面更具响应性。 js?key=AIzaSyCg83y9n8X5LtVHEJ_HBtDS73mLrrPA5jQ:99 [违规] 向阻止滚动的“鼠标滚轮”事件添加了非被动事件侦听器。考虑将事件处理程序标记为“被动”以使页面更具响应性。 util.js:40 [Violation] 向阻止滚动的“touchstart”事件添加了非被动事件侦听器。考虑将事件处理程序标记为“被动”以使页面更具响应性。 util.js:40 @Vlatko Vlahek
您的项目中有 util.js 文件吗？如果你愿意，请分享它的代码，这样我就可以看到那里附加了什么类型的事件监听器，以及你是如何实现它的。
你能粘贴课程的链接吗？我很乐意看看它并尝试看看有什么不同。
@CrissiMariamRobert 谢谢。我将查看 Udemy 示例。您能否让我知道如何通过几个步骤重现该问题，例如当它发生时你会怎么做？