如何在react-google-maps/api中使用FontAwesome图标自定义Marker

完全可以在@react-google-maps/api中使用Font Awesome图标作为地图标记。由于原生Marker组件的icon属性不支持直接传入React组件，可通过以下两种成熟方案实现需求：

方案1：通过内置OverlayView渲染图标组件（推荐） #

该方案不需要做任何格式转换，可以直接使用从react-icons/fa引入的组件，支持自定义颜色、大小、交互事件，灵活度最高。

• 从依赖包中引入OverlayView组件和需要的FA图标
• 配置偏移规则让图标底部对准实际经纬度坐标点
• 图标外层可直接包裹任意React内容，实现弹窗、hover效果等自定义交互

实现代码示例：

import React, { Component } from 'react';
import { GoogleMap, LoadScript, OverlayView } from '@react-google-maps/api';
// 替换为你实际需要的FA图标
import { FaMapMarkerAlt } from 'react-icons/fa';

const containerStyle = {
  width: '400px',
  height: '400px'
};

const center = {
  lat: -3.745,
  lng: -38.523
};

// 配置图标偏移，让图标底部尖端对准坐标点，避免错位
const getPixelPositionOffset = (width, height) => ({
  x: -(width / 2),
  y: -height,
});

class MyComponents extends Component {
  render() {
    return (
      <LoadScript googleMapsApiKey="YOUR_API_KEY">
        <GoogleMap
          mapContainerStyle={containerStyle}
          center={center}
          zoom={10}
        >
          <OverlayView
            position={center}
            mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
            getPixelPositionOffset={getPixelPositionOffset}
          >
            <div style={{ cursor: 'pointer' }}>
              {/* 直接使用FA组件，可自由配置尺寸、颜色、事件 */}
              <FaMapMarkerAlt size={32} color="#ff4444" />
            </div>
          </OverlayView>
        </GoogleMap>
      </LoadScript>
    )
  }
}

注意：mapPaneName选择OVERLAY_MOUSE_TARGET才能让图标正常响应点击、hover等鼠标事件。

方案2：将图标转为Data URL传入Marker的icon属性 #

如果需要保留原生Marker的默认特性（比如官方聚合能力、内置动画），可以把FA图标转换成SVG格式的Data URL，直接传入icon属性使用。

• 借助react-dom/server的renderToStaticMarkup方法把React图标组件渲染为静态SVG字符串
• 将字符串编码为base64格式的Data URL
• 配置图标尺寸和锚点，避免显示错位

实现代码示例：

import React, { Component } from 'react';
import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';
import { FaBeer } from 'react-icons/fa';
import { renderToStaticMarkup } from 'react-dom/server';

const containerStyle = {
  width: '400px',
  height: '400px'
};

const center = {
  lat: -3.745,
  lng: -38.523
};

// 生成自定义图标配置
const iconMarkup = renderToStaticMarkup(
  <FaBeer size={32} color="#f28e1c" />
);
const customMarkerIcon = {
  url: `data:image/svg+xml;base64,${window.btoa(iconMarkup)}`,
  scaledSize: new window.google.maps.Size(32, 32),
  anchor: new window.google.maps.Point(16, 32)
};

class MyComponents extends Component {
  render() {
    return (
      <LoadScript googleMapsApiKey="YOUR_API_KEY">
        <GoogleMap
          mapContainerStyle={containerStyle}
          center={center}
          zoom={10}
        >
          <Marker position={center} icon={customMarkerIcon} />
        </GoogleMap>
      </LoadScript>
    )
  }
}

注意：该方案渲染的是静态图片，无法直接响应React状态变化，如果需要动态修改图标样式，需要重新生成对应的Data URL。

内容的提问来源于stack exchange，提问作者venndi