如何在react-google-charts的GeoChart中自定义标记图标？

Google Charts的GeoChart原生确实没有提供直接设置自定义标记图标的选项，不过有两种可行的解决思路：

方案一：改用Google Maps JavaScript API（推荐） #

如果可以替换掉GeoChart，直接用Google Maps的官方React库（比如@react-google-maps/api）是最稳妥的方式，它支持完全自定义标记图标，包括图片、SVG甚至自定义DOM元素。

示例代码 #

先安装依赖：

npm install @react-google-maps/api

然后实现地图组件：

import { GoogleMap, Marker } from '@react-google-maps/api';

const CustomMarkerMap = () => {
  const mapStyle = {
    width: '200%',
    height: '100%'
  };
  // 根据你的数据设置地图中心
  const mapCenter = { lat: 30, lng: 0 };

  return (
    <GoogleMap
      mapContainerStyle={mapStyle}
      center={mapCenter}
      zoom={2}
      apiKey="***My Key***"
    >
      {/* 遍历geoData生成自定义标记 */}
      {geoData.map((item, idx) => (
        <Marker
          key={idx}
          // 假设你的geoData包含经纬度字段，比如item.lat和item.lng
          position={{ lat: item.lat, lng: item.lng }}
          icon={{
            url: '/assets/custom-marker.png', // 你的自定义图标路径
            scaledSize: new window.google.maps.Size(20, 20) // 调整图标大小
          }}
        />
      ))}
    </GoogleMap>
  );
};

export default CustomMarkerMap;

方案二：DOM hack替换GeoChart标记（仅限必须保留GeoChart的场景） #

如果一定要用GeoChart，可以在图表渲染完成后，手动操作DOM把默认的圆形标记替换成自定义图标。这种方式是取巧的方案，可能存在交互失效、重绘后需要重新替换的问题。

示例代码 #

利用react-google-charts的onReady事件触发DOM替换：

<Chart
  width="200%"
  height="100%"
  chartType="GeoChart"
  data={geoData}
  rootProps={{ "data-testid": "1" }}
  mapsApiKey="***My Key***"
  options={{
    displayMode: "markers",
    sizeAxis: { maxSize: 10, minSize: 10 },
    markerOpacity: 0.9,
    backgroundColor: "none",
    colors: ["#FFA4A5", "#34D399"],
    legend: "none",
    datalessRegionColor: "#343434",
  }}
  onReady={(chartInstance) => {
    // 获取所有圆形标记元素
    const circleMarkers = chartInstance.getContainer().querySelectorAll('svg circle');
    
    circleMarkers.forEach((circle, idx) => {
      // 创建自定义SVG图标（也可以用img标签引入外部图片）
      const customIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
      customIcon.setAttribute("width", "20");
      customIcon.setAttribute("height", "20");
      // 这里替换成你自己的SVG代码
      customIcon.innerHTML = `
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" fill="#FFA4A5"/>
      `;
      
      // 替换原有的圆形标记
      circle.parentNode.replaceChild(customIcon, circle);
    });
  }}
/>

注意：这种方式下，图表的hover、点击等交互可能会失效，而且如果图表因为窗口 resize、数据更新等原因重绘，需要重新执行替换逻辑。

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