Question

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

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

last-child

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

Answer 1

我有一个使用不同包的工作解决方案。

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

<强> 1。 Google会在 head 部分

中映射脚本

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

此外，不要忘记包含页面标题和其他通常可以帮助您进行搜索引擎优化的内容，这些内容在您的示例中缺失。

<!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。地图本身＆amp;用户详细信息

我之前成功使用了另一个名为“反应谷歌地图”的软件包＆＃39;这个时候似乎工作正常，所以我将在UserDetail示例中添加一个示例

考虑到你只有UserDetails的渲染方法，我建议你在这里使用纯功能组件。

此外，您可以在此处执行一些操作来帮助简化代码，还有一些事情可以自问。

为什么 userdetail 不是 camelCase ？
为什么你在连接方法中传递动作，当你在里面的任何地方都没有使用它时，以及何时可以直接在渲染中使用它？
您确定确实需要从操作中导入所有内容吗？

从＆＃39; ../ actions＆＃39;导入{actionName}

如果您要使用特定的东西，也许这样的事情会更有益。
另一方面，此处的任何地方都没有使用任何操作，因此我已将其从我的示例中移除。
为什么谷歌地图文件名为 google_maps ？ Snake case应仅用于常量，例如google maps api key不会改变：

const 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);

在React App中集成GoogleMaps的问题

1 个答案: