React 地图组件使用教程

水珊习Gale

于 2025-04-12 09:20:10 发布

阅读量930

点赞数 14

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00631/article/details/147159054

React 地图组件使用教程

google-map-react Google map library for react that allows rendering components as markers :tada: 项目地址: https://gitcode.com/gh_mirrors/go/google-map-react

1. 项目介绍

google-map-react 是一个基于 React 的开源地图组件库，它允许开发者在 React 应用中轻松地集成 Google 地图。这个库提供了一种简单的方式来在地图上添加自定义的标记（markers），并且支持在服务器端渲染，有利于搜索引擎优化。google-map-react 不仅可以渲染默认的 Google 地图标记和气球，还可以使用自定义的 React 组件来作为标记。

2. 项目快速启动

首先，确保你已经安装了 Node.js 和 npm。以下步骤将引导你快速启动一个包含 google-map-react 的 React 项目。

# 创建一个新的 React 应用
npx create-react-app my-google-map-app

# 进入项目目录
cd my-google-map-app

# 安装 google-map-react
npm install google-map-react

接下来，你可以在你的 React 组件中使用 GoogleMapReact 组件。以下是一个简单的例子：

import React from 'react';
import GoogleMapReact from 'google-map-react';

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

const SimpleMap = () => {
  const defaultProps = {
    center: { lat: 10.99835602, lng: 77.01502627 },
    zoom: 11
  };

  return (
    <div style={{ height: '100vh', width: '100%' }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: 'YOUR_GOOGLE_MAP_API_KEY' }}
        defaultCenter={defaultProps.center}
        defaultZoom={defaultProps.zoom}
      >
        <AnyReactComponent
          lat={59.955413}
          lng={30.337844}
          text="My Marker"
        />
      </GoogleMapReact>
    </div>
  );
};

export default SimpleMap;

确保替换 'YOUR_GOOGLE_MAP_API_KEY' 为你的 Google 地图 API 密钥。