如何将react原生地图设置为通过调用文件名来使用自定义标记？

import React, { Component } from 'react';
import { withGoogleMap, GoogleMap, Marker } from 'react-google-maps';

class MapComponent extends Component {
  state = {
    customMarker: 'custom-marker.png', // 自定义标记的文件名
  };

  componentDidMount() {
    // 根据文件名获取自定义标记的具体信息，比如坐标等
    const { customMarker } = this.state;
    // 调用文件名获取自定义标记的信息的方法，比如从服务器获取或本地存储
    const markerInfo = this.getMarkerInfo(customMarker);

    // 使用地图库提供的方法将标记添加到地图上
    // 这里使用了react-google-maps库的withGoogleMap高阶组件
    // 可以根据具体的地图库来调用相应的方法
    this.props.googleMapLoader.then((maps) => {
      const { lat, lng } = markerInfo.coordinates;
      const position = new maps.LatLng(lat, lng);

      new maps.Marker({
        position,
        map: this.refs.map,
        icon: markerInfo.icon,
      });
    });
  }

  getMarkerInfo = (fileName) => {
    // 根据文件名获取自定义标记的具体信息的方法
    // 可以在这里进行文件名到标记信息的映射，比如从一个JSON文件中读取
    // 返回包含标记信息的对象，比如坐标、图标等
    return {
      coordinates: { lat: 37.7749, lng: -122.4194 }, // 示例坐标
      icon: fileName, // 示例图标
    };
  };

  render() {
    const GoogleMapContainer = withGoogleMap(() => (
      <GoogleMap
        ref="map"
        defaultZoom={12}
        defaultCenter={{ lat: 37.7749, lng: -122.4194 }} // 示例中心坐标
      />
    ));

    return (
      <div style={{ height: '400px' }}>
        <GoogleMapContainer
          containerElement={<div style={{ height: '100%' }} />}
          mapElement={<div style={{ height: '100%' }} />}
        />
      </div>
    );
  }
}

export default MapComponent;