React Google Maps 如何通过 React.js 使用 Google Maps API

2025-05-25

React Google Maps如何通过 React.js 使用 Google Maps API

你好班

在个人 React.js 项目中尝试实现 Google 地图 API 时，我遇到了一些非常复杂且令人困惑的示例。因此，这里提供一个简洁易懂的示例，展示如何在我的应用中使用 Google 地图！

首先，事情第一！

前往Google 地图 API页面，注册并获取一个令牌！您必须输入信用卡号才能接收令牌。不过，Google 承诺，如果您不亲自升级服务，他们不会从您的账户扣款。您可以自行决定是否继续操作。

一旦您拥有 API 密钥，您就可以开始构建您的应用程序！

创建你的 React 应用

npm init react-app my-app
Enter fullscreen mode Exit fullscreen mode

安装依赖项

npm install --save google-maps-react
Enter fullscreen mode Exit fullscreen mode

这就是我们将谷歌地图作为组件获取的方法！
检查你的 package.json 文件，确保它已安装！

初始设置完成后，您就可以开始编码！

1.导入google-maps-react！

import { Map, GoogleApiWrapper } from 'google-maps-react';
Enter fullscreen mode Exit fullscreen mode

2. 将地图组件添加到您的渲染函数！

render() {
    return (
        <Map
          google={this.props.google}
          zoom={8}
          style={mapStyles}
          initialCenter={{ lat: 47.444, lng: -122.176}}
        />
    );
  }
Enter fullscreen mode Exit fullscreen mode

3. 编辑您的出口违约声明

export default GoogleApiWrapper({
  apiKey: 'TOKEN HERE'
})(MapContainer);
Enter fullscreen mode Exit fullscreen mode

请确保在此处插入您的 API 密钥！

4. 添加样式

如果您愿意，可以更改一些样式属性。我将其作为类外的常量变量来更改。

const mapStyles = {
  width: '100%',
  height: '100%',
};
Enter fullscreen mode Exit fullscreen mode

5.启动您的服务器！

谷歌地图API

太棒了！你成功了！不过说实话，一张没有标记的地图还有什么意义呢！那就加点标记吧！

6. 标记一下！

import { Map, GoogleApiWrapper, Marker } from 'google-maps-react';
Enter fullscreen mode Exit fullscreen mode

更新您的地图组件以包含标记组件！

render() {
    return (
        <Map
          google={this.props.google}
          zoom={8}
          style={mapStyles}
          initialCenter={{ lat: 47.444, lng: -122.176}}
        >
          <Marker position={{ lat: 48.00, lng: -122.00}} />
        </Map>
    );
  }
Enter fullscreen mode Exit fullscreen mode

那么你就会拥有这个！

带有标记的谷歌地图

让我们添加更多！

无需添加单个标记，您可以通过编程方式循环遍历状态来显示地点。在我的示例中，我显示了该区域内的几家二手商店。您还可以为它们添加事件，例如 onClick！

export class MapContainer extends Component {
  constructor(props) {
    super(props);

    this.state = {
      stores: [{lat: 47.49855629475769, lng: -122.14184416996333},
              {latitude: 47.359423, longitude: -122.021071},
              {latitude: 47.2052192687988, longitude: -121.988426208496},
              {latitude: 47.6307081, longitude: -122.1434325},
              {latitude: 47.3084488, longitude: -122.2140121},
              {latitude: 47.5524695, longitude: -122.0425407}]
    }
  }

  displayMarkers = () => {
    return this.state.stores.map((store, index) => {
      return <Marker key={index} id={index} position={{
       lat: store.latitude,
       lng: store.longitude
     }}
     onClick={() => console.log("You clicked me!")} />
    })
  }

  render() {
    return (
        <Map
          google={this.props.google}
          zoom={8}
          style={mapStyles}
          initialCenter={{ lat: 47.444, lng: -122.176}}
        >
          {this.displayMarkers()}
        </Map>
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

这就是全部内容了！

带有多个标记的谷歌地图

我希望本教程能帮助您构建自己的应用程序！

文章来源：https://dev.to/jessicabetts/how-to-use-google-maps-api-and-react-js-26c2
Devto 翻译
PREV
Python 学习资源 wemake-python-styleguide
NEXT
我如何通过 Gatsby 获得完美的 Google Lighthouse 评分