使用功能组件在google-map-react中向Google地图添加标记

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

const Marker = ({ text }) => <div className="marker">{text}</div>;

const MapContainer = () => {
  const mapOptions = {
    center: { lat: 37.7749, lng: -122.4194 }, // 设置地图中心点的经纬度
    zoom: 10, // 设置地图缩放级别
  };

  const markers = [
    { lat: 37.7749, lng: -122.4194, text: 'San Francisco' }, // 标记1的经纬度和文本
    { lat: 34.0522, lng: -118.2437, text: 'Los Angeles' }, // 标记2的经纬度和文本
    // 可以添加更多的标记
  ];

  return (
    <div className="map-container">
      <GoogleMapReact
        bootstrapURLKeys={{ key: 'YOUR_API_KEY' }} // 替换为你的Google地图API密钥
        defaultCenter={mapOptions.center}
        defaultZoom={mapOptions.zoom}
      >
        {markers.map((marker, index) => (
          <Marker key={index} lat={marker.lat} lng={marker.lng} text={marker.text} />
        ))}
      </GoogleMapReact>
    </div>
  );
};

export default MapContainer;