当前位置：首页 > news >正文

如何在 React 项目中快速集成 Google Map React：10分钟上手教程

news 2026/3/27 5:54:23

如何在 React 项目中快速集成 Google Map React：10分钟上手教程

【免费下载链接】google-map-react项目地址: https://gitcode.com/gh_mirrors/goo/google-map-react

Google Map React 是一个功能强大的 React 组件，它基于 Google Maps API 构建，允许开发者在 React 应用中轻松集成交互式地图。本教程将带你在 10 分钟内完成从安装到基础使用的全过程，即使是 React 新手也能快速掌握。

🚀 1. 快速安装指南

要在你的 React 项目中使用 Google Map React，首先需要通过 npm 或 yarn 安装依赖包。打开终端，在项目根目录下执行以下命令：

npm install --save google-map-react # 或者使用 yarn yarn add google-map-react

如果你需要在本地运行项目示例进行学习，可以克隆官方仓库并安装依赖：

git clone https://link.gitcode.com/i/206939bd9c2c39729e6121514e7b6f24 cd google-map-react/example yarn install yarn start

📝 2. 基础使用示例

安装完成后，你可以在 React 组件中导入并使用GoogleMapReact组件。以下是一个简单的地图显示示例：

import React from 'react'; import GoogleMapReact from 'google-map-react'; const MapExample = () => { const defaultCenter = { lat: 34.0522, lng: -118.2437 }; // 洛杉矶坐标 const defaultZoom = 10; return ( <div style={{ height: '100vh', width: '100%' }}> <GoogleMapReact defaultCenter={defaultCenter} defaultZoom={defaultZoom} > {/* 这里可以添加地图标记等子组件 */} </GoogleMapReact> </div> ); }; export default MapExample;

在这个示例中，defaultCenter属性设置了地图的初始中心坐标，defaultZoom设置了初始缩放级别。你可以根据需要调整这些值。

🔑 3. 配置 Google Maps API 密钥

为了使用 Google Maps API 的完整功能，你需要获取并配置 API 密钥。在 Google Cloud 控制台中创建项目并启用 Google Maps JavaScript API，然后获取 API 密钥。

获取密钥后，你可以在组件中通过bootstrapURLKeys属性传入：

<GoogleMapReact bootstrapURLKeys={{ key: 'YOUR_API_KEY' }} defaultCenter={defaultCenter} defaultZoom={defaultZoom} > {/* 地图内容 */} </GoogleMapReact>

📌 4. 添加地图标记

Google Map React 允许你在地图上添加自定义标记。只需在GoogleMapReact组件内部添加子组件，并为其指定lat和lng属性：

const Marker = ({ text }) => <div style={{ color: 'red' }}>{text}</div>; // 在 GoogleMapReact 组件内部 <Marker lat={34.0522} lng={-118.2437} text="洛杉矶市中心" />

你可以自定义标记的样式和内容，使其符合你的应用需求。