React中如何用自定义组件实现Google Maps高级标记

一、手动挂载React组件到标记容器 #

Google Maps高级标记支持传入DOM元素作为内容，你可以创建空容器，用ReactDOM.createRoot将自定义Marker组件渲染到容器中，替代innerHTML的写法：

import { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom/client';
import { AdvancedMarkerElement } from '@googlemaps/adv-markers-utils';
import CustomMarker from './CustomMarker'; // 你的自定义Marker组件

function MapComponent() {
  const mapRef = useRef(null);
  const markerContainerRef = useRef(document.createElement('div'));

  useEffect(() => {
    if (!mapRef.current) return;

    // 将React组件渲染到空容器
    const root = ReactDOM.createRoot(markerContainerRef.current);
    root.render(<CustomMarker />);

    // 创建高级标记并绑定容器
    const marker = new AdvancedMarkerElement({
      map: mapRef.current,
      position: { lat: 40.7128, lng: -74.0060 },
      content: markerContainerRef.current
    });

    // 组件卸载时清理资源
    return () => {
      root.unmount();
      marker.setMap(null);
    };
  }, []);

  return <div ref={mapRef} style={{ width: '100%', height: '400px' }} />;
}

二、使用成熟的React地图封装库 #

如果不想手动处理DOM挂载，优先选维护活跃的官方适配库，解决缩放时标记位置偏移问题：

• @react-google-maps/api：官方推荐的React封装库，原生支持高级标记，可直接传入React组件作为标记内容，自动处理地图交互时的位置同步：

  import { GoogleMap, AdvancedMarker } from '@react-google-maps/api';
  import CustomMarker from './CustomMarker';
  
  function MapComponent() {
    const center = { lat: 40.7128, lng: -74.0060 };
  
    return (
      <GoogleMap
        mapContainerStyle={{ width: '100%', height: '400px' }}
        center={center}
        zoom={10}
      >
        <AdvancedMarker position={center}>
          <CustomMarker />
        </AdvancedMarker>
      </GoogleMap>
    );
  }
  

三、关键注意事项 #

• 绝对不要用innerHTML插入React生成的HTML字符串，会丢失组件生命周期、状态管理能力，退化为静态DOM。
• 手动挂载时必须在组件卸载时调用root.unmount()和marker.setMap(null)，避免内存泄漏。
• 第三方库优先选官方维护或社区活跃度高的，能规避多数兼容性、位置同步类问题。

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