React Google Maps 使用教程

钱勃骅

于 2024-09-11 07:54:09 发布

阅读量761

点赞数 19

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00918/article/details/142117571

React Google Maps 使用教程

项目地址:https://gitcode.com/gh_mirrors/rea/react-google-maps

1. 项目介绍

react-google-maps 是一个用于在 React 应用程序中集成 Google Maps JavaScript API 的 TypeScript/JavaScript 库。它提供了一系列 React 组件和钩子，使得在 React 应用中使用 Google Maps 变得更加简单和直观。该库不仅支持基本的 Google Maps 功能，还允许开发者轻松创建自定义组件，并与 vis.gl 的其他库（如 deck.gl）结合使用，以实现高性能的 2D 和 3D WebGL 可视化。

2. 项目快速启动

安装

首先，你需要在你的项目中安装 react-google-maps 库。你可以使用 npm 或 yarn 进行安装：

npm install @vis.gl/react-google-maps
# 或者
yarn add @vis.gl/react-google-maps

使用

在你的 React 应用中，首先导入 APIProvider 组件，并将其包裹在你需要使用 Google Maps 的组件外部。然后，你可以使用各种内置的 React 组件来创建地图、标记和信息窗口。

import React from 'react';
import { APIProvider, Map, Marker } from '@vis.gl/react-google-maps';

const App = () => {
  return (
    <APIProvider apiKey="YOUR_API_KEY_HERE">
      <Map center={{ lat: 37.7749, lng: -122.4194 }} zoom={12}>
        <Marker position={{ lat: 37.7749, lng: -122.4194 }} />
      </Map>
    </APIProvider>
  );
};

export default App;