使用@react-google-maps/api时自定义元素不显示于谷歌地图的问题咨询

@react-google-maps/api完全支持自定义地图元素，但普通React组件不能直接作为<GoogleMap>的子组件渲染——因为<GoogleMap>的子组件需要和谷歌地图原生API的图层/标记系统绑定，像MarkerF这类官方组件已经封装了谷歌地图的google.maps.Marker对象，所以能正常显示。你的MyComponent只是普通div，没有和地图的原生API关联，因此不会被渲染到地图上。

下面提供两种可行的自定义组件实现方式：

方式一：基于MarkerF封装自定义标记 #

这是最简单的自定义标记方案，利用MarkerF的children属性传入自定义内容：

import { GoogleMap, useLoadScript, LoadScriptProps, MarkerF } from '@react-google-maps/api';

// 自定义标记组件
const CustomMarker: React.FC<{ lat: number; lng: number }> = ({ lat, lng }) => {
  return (
    <MarkerF position={{ lat, lng }}>
      {/* 这里放你的自定义内容 */}
      <div style={{
        padding: '4px 8px',
        backgroundColor: '#fff',
        border: '1px solid #ccc',
        borderRadius: '4px',
        fontSize: '12px',
        fontWeight: 'bold'
      }}>
        自定义标记
      </div>
    </MarkerF>
  );
};

// 在SearchResultsMap中替换MyComponent为CustomMarker
const SearchResultsMap = ({ lat, lng }: Props) => {
  // ... 原有代码不变 ...

  return (
    <div className="block h-full"> {/* 注意：这里的引号要改成英文引号 */}
      <GoogleMap
        center={{ lat, lng }}
        zoom={15}
        mapContainerStyle={{ width: '100%', height: '100%' }}
        onLoad={(map) => setMap(map)}
        options={{
          mapTypeControl: false,
          streetViewControl: false,
          zoomControl: false,
          disableDefaultUI: true,
        }}
      >
        <CustomMarker lat={Number(lat)} lng={Number(lng)} />
      </GoogleMap>
   </div>
  );
};

方式二：使用OverlayViewF创建自定义覆盖层 #

如果需要更灵活的自定义元素（比如固定在地图某个位置的信息面板、自定义图层），可以用OverlayViewF，它封装了谷歌地图的google.maps.OverlayView：

import { GoogleMap, useLoadScript, LoadScriptProps, OverlayViewF } from '@react-google-maps/api';

// 自定义覆盖层组件
const CustomOverlay: React.FC<{ lat: number; lng: number }> = ({ lat, lng }) => {
  const position = new window.google.maps.LatLng(lat, lng);

  const getPixelPositionOffset = (offsetWidth: number, offsetHeight: number) => {
    return { x: -offsetWidth / 2, y: -offsetHeight };
  };

  return (
    <OverlayViewF
      position={position}
      mapPaneName={OverlayViewF.OVERLAY_MOUSE_TARGET}
      getPixelPositionOffset={getPixelPositionOffset}
    >
      <div style={{
        padding: '6px 12px',
        backgroundColor: '#2196F3',
        color: '#fff',
        borderRadius: '4px',
        boxShadow: '0 2px 4px rgba(0,0,0,0.2)'
      }}>
        自定义覆盖层
      </div>
    </OverlayViewF>
  );
};

// 在SearchResultsMap中使用CustomOverlay
const SearchResultsMap = ({ lat, lng }: Props) => {
  // ... 原有代码不变 ...

  return (
    <div className="block h-full">
      <GoogleMap
        center={{ lat, lng }}
        zoom={15}
        mapContainerStyle={{ width: '100%', height: '100%' }}
        onLoad={(map) => setMap(map)}
        options={{
          mapTypeControl: false,
          streetViewControl: false,
          zoomControl: false,
          disableDefaultUI: true,
        }}
      >
        <CustomOverlay lat={Number(lat)} lng={Number(lng)} />
      </GoogleMap>
   </div>
  );
};

另外注意你代码中的一个小问题：<div className=“block h-full”>里的引号是中文引号，要改成英文引号"block h-full"，否则样式可能不生效。

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