将Google Maps Javascript API放置在React的容器中

将 Google Maps JavaScript API 集成到 React 应用程序的容器中涉及几个步骤。以下是一个基本的指南，帮助你在 React 组件中使用 Google Maps JavaScript API。

步骤 1: 获取 Google Maps API 密钥

首先，你需要一个 Google Maps API 密钥。你可以从 Google Cloud Console获取。

步骤 2: 安装依赖

你可以使用 react-google-maps/api 包来简化集成过程。首先，安装这个包：

npm install @react-google-maps/api

步骤 3: 创建地图容器组件

创建一个 React 组件来容纳地图。以下是一个简单的示例：

import React, { useEffect, useRef } from 'react';
import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';

const MapContainer = () => {
  const mapRef = useRef(null);

  useEffect(() => {
    if (mapRef.current) {
      // 你可以在这里添加地图初始化代码
    }
  }, []);

  return (
    <LoadScript googleMapsApiKey="YOUR_GOOGLE_MAPS_API_KEY">
      <GoogleMap
        mapContainerStyle={{ width: '100%', height: '400px' }}
        center={{ lat: -34.397, lng: 150.644 }}
        zoom={8}
        onLoad={() => {
          console.log('Map loaded');
        }}
      >
        <Marker position={{ lat: -34.397, lng: 150.644 }} />
      </GoogleMap>
    </LoadScript>
  );
};

export default MapContainer;

步骤 4: 在你的应用中使用地图容器组件

在你的 React 应用中使用这个地图容器组件：

import React from 'react';
import MapContainer from './MapContainer';

const App = () => {
  return (
    <div>
      <h1>Google Maps in React</h1>
      <MapContainer />
    </div>
  );
};

export default App;