如何在 React js 中添加谷歌地图 - Javascript

如果你需要在React项目中添加谷歌地图来显示地理位置数据，那么这篇文章就是为你准备的。本文将介绍如何使用Javascript 在React中添加谷歌地图。

步骤1：在Google Developers Console中创建API密钥

首先，你需要在Google Developers Console中创建一个API密钥。由于本文的主题是如何在React中添加谷歌地图，因此这里提供了一些简单的步骤:

1. 用谷歌账号登录Developers Console 访问网址

2. 点击左上角的“Select a Project”按钮，然后选择一个项目或者创建一个新项目。

3. 选择“Library”选项卡。

4. 搜索“Maps JavaScript API”或者“Maps SDK for Android”。

5. 选择该API，然后点击“Enable”（启用）按钮。

6. 回到“Dashboard”，然后点击“Credentials”选项，然后点击“Create Credentials”按钮。

7. 选择“API Key”选项。

8. 创建你的API密钥。

9. 复制你的API密钥以备后用。

步骤2：安装Google Maps JavaScript API

为了在React项目中使用Google Maps，你需要先安装Google Maps JavaScript API。你可以使用NPM来安装它。打开终端并输入以下命令：

npm install @google/maps

代码片段注释：这里介绍利用NPM安装Google Maps JavaScript API的代码片段

步骤3：在React中添加Google Maps

现在，我们已经准备好在React项目中添加Google Maps了。

在你的React项目中打开App.js文件，然后添加以下代码：

import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';

const AnyReactComponent = ({ text }) => <div>{text}</div>;

class SimpleMap extends Component {

    static defaultProps = {
        center: {
            lat: 59.95,
            lng: 30.33
        },
        zoom: 11
    };

    render() {
        return (
            // Important! Always set the container height explicitly
            <div style={{ height: '100vh', width: '100%' }}>
                <GoogleMapReact
                    bootstrapURLKeys={{ key: YOUR_GOOGLE_MAPS_API_KEY }}
                    defaultCenter={this.props.center}
                    defaultZoom={this.props.zoom}
                >
                    <AnyReactComponent
                    lat={59.955413}
                    lng={30.337844}
                    text="My Marker"
                    />
                </GoogleMapReact>
            </div>
        );
    }
}

export default SimpleMap;

在上面的代码中，我们首先导入了React和GoogleMapReact组件，然后定义了一个带有text属性的任意React组件AnyReactComponent，用于标记地图上的位置。我们还定义了一个SimpleMap组件，其中包含了GoogleMapReact组件。在GoogleMapReact组件中，我们设置了一些初始参数，如center和zoom。我们还将我们刚在Developers Console中创建的API密钥作为bootstrapURLKeys属性传递给组件。

现在，你可以运行你的React项目并查看结果。

代码片段注释：这里是在React中添加谷歌地图的完整代码片段

结论

现在，你已经学会如何使用Javascript在React项目中添加谷歌地图了。在你的下一个React项目中，记得使用这个方法来添加谷歌地图，它将会给你的地理位置数据展示带来更多的乐趣。