reactjs - 需要使用 google-map-react 在热图中创建多种颜色

Question

需要使用 google-map-react 从 json 对象中基于价值介质在热图中创建多个颜色标记很容易，这是 react.js 中用于此的包。这是我目前正在处理的代码有什么想法因为那样做。我需要在热图上添加 3 种颜色。

import marker from "./marker.png";
import "./App.css";
import GoogleMapReact from "google-map-react";

function App() {
  const defaultProps = {
    center: {
      lat: 10.99835602,
      lng: 77.01502627,
    },
    zoom: 11,
  };

  const AnyReactComponent = ({ text }) => (
    <div>
      <img src={marker} alt="marker" width={30} />
    </div>
  );

  const heatMapdata = {
    positions: [
      { lat: 55.5, lng: 34.56 },
      { lat: 55.7, lng: 28.4 },
      { lat: 55.0, lng: 28.4 },
      { lat: 55.2, lng: 28.4 },
      { lat: 56.4, lng: 28.4 },
      { lat: 56.0, lng: 28.4 },
      { lat: 56.2, lng: 28.4 },
      { lat: 56.4, lng: 28.4 },
    ],
    options: {
      radius: 30,
      opacity: 0.6,
      gradient: ["rgba(0, 255, 255, 0)", "rgba(0, 255, 255, 1)"],
    },
  };

  return (
    <div style={{ height: "100vh", width: "100%" }}>
      <GoogleMapReact
        bootstrapURLKeys={{
          key: "api_key",
          libraries: ["places", "geometry", "drawing", "visualization"],
        }}
        defaultCenter={defaultProps.center}
        defaultZoom={defaultProps.zoom}
        heatmapLibrary={true}
        heatmap={heatMapdata}
      >
        {heatMapdata?.positions.map((position) => (
          <AnyReactComponent
            lat={position?.lat}
            lng={position?.lng}
            text="My Marker"
          />
        ))}
      </GoogleMapReact>
    </div>
  );
}
export default App;