问在Google中使用React组件作为自定义OverlayView

EN

const GoogleMap = ({
  center,
  zoom,
  zoomControl,
  zoomControlPosition,
  fullscreenControl,
  scrollwheel,
  streetViewControl,
  mapTypeControl,
  scaleControl,
  mapTypeId,
  options,
  height,
  width,
  mapMarkers,
  onChildMouseUp
}) => {
  const [gmap, setGmap] = useState();
  const { google } = window;
  const { maps } = google || {};

  const initMap = async () => {
    const map = await new maps.Map(document.getElementById("map"), {
      center: { lat: center[0], lng: center[1] },
      zoom,
      zoomControl,
      zoomControlOptions: {
        position: maps.ControlPosition[zoomControlPosition]
      },
      fullscreenControl,
      scrollwheel,
      streetViewControl,
      scrollWheelZoom: "center",
      mapTypeControl,
      scaleControl,
      mapTypeId,
      ...options
    });

    if (mapMarkers && mapMarkers.length > 0) {
      const newBoundary = new google.maps.LatLngBounds();

      const markers = mapMarkers.map((m) => {
        const { position, icon, draggable } = m;
        const marker = new CustomMarker(
          position,
          draggable,
          icon,
          map,
          onChildMouseUp
        );
        newBoundary.extend(marker.latlng);
        return marker;
      });

      if (mapMarkers.length > 1) map.fitBounds(newBoundary);

      // Add a marker clusterer to manage the markers.
      new MarkerClusterer(map, markers, {
        calculator: (gMarkers, numStyles) => {
          let index = 0;
          const count = gMarkers.length;
          let dv = count;
          while (dv !== 0) {
            dv = parseInt(dv / 10, 10);
            index += 1;
          }

          index = Math.min(index, numStyles);
          return {
            text: `${count}`,
            index
          };
        },
        gridSize: 50,
        styles: [
          {
            className: "clusterMarker",
            width: 50,
            height: 18
          }
        ]
      });
    }

    return map;
  };

  const recenterMap = () => {
    const cntr = new google.maps.LatLng(center[0], center[1]);
    gmap.setCenter(cntr);
  };

  useEffect(() => {
    let isMounted = true;

    const getMap = async () => {
      if (isMounted) {
        const data = await initMap();
        if (data) return data;
        return null;
      }
      return null;
    };

    getMap().then((m) => isMounted && setGmap(m));

    return () => {
      isMounted = false;
    };
  }, []);

  useEffect(() => {
    // recenter map after center value updates
    if (gmap && center && center.length === 2) recenterMap();
  }, [center]);

  return <Map id="map" mapHeight={height} mapWidth={width} />;
};

import ReactDOMServer from "react-dom/server";

const { google } = window;

function CustomMarker(latlng, draggable, icon, map, onChildMouseUp) {
  // create global state to be accessed in prototype functions
  this.latlng = latlng;
  this.getDraggable = () => draggable;
  this.icon = icon;
  this.onChildMouseUp = onChildMouseUp;
  // create div that houses our custom marker
  this.div = document.createElement("div");
  // Once the LatLng and text are set, add the marker to the map.  This will
  // trigger a call to panes_changed which should in turn call draw.
  this.setMap(map);
}

// create prototype to display custom DOM element on map and access to custom methods
CustomMarker.prototype = new google.maps.OverlayView();

// init custom marker
CustomMarker.prototype.init = function init() {
  const container = this.div;

  container.style.position = "absolute";
  container.draggable = true;

  if (this.icon) {
    // use ReactDOMServer to render icon component as a string to be added as innerHTML
    const marker = ReactDOMServer.renderToString(this.icon);
    container.innerHTML = marker;
  }

  this.set("container", container);
  this.getPanes().floatPane.appendChild(container);
};

// draw function is function that is called initially to draw marker onto map
CustomMarker.prototype.draw = function draw() {
  if (!this.div) {
    // create div that houses our custom marker
    this.div = document.createElement("div");
  }
  // only draw marker if it has not been assigned the customMarker class
  if (!this.div.classList.contains("customMarker")) {
    this.div.classList.add("customMarker");

    const panes = this.getPanes();
    panes.overlayImage.appendChild(this.div);

    // initialise
    this.init();
  }

  // call setPosition function
  this.setPosition();
};

CustomMarker.prototype.remove = function remove() {
  // Check if the overlay was on the map and needs to be removed.
  if (this.div) {
    this.div.parentNode.removeChild(this.div);
    this.div = null;
  }
};

CustomMarker.prototype.getPosition = function getPosition() {
  // return global latlng value
  return this.latlng;
};

CustomMarker.prototype.setPosition = function setPosition(pos) {
  // update global latlng value with current position of marker
  if (pos) this.latlng = pos;

  const projection = this.getProjection();
  if (!projection) return;

  // convert latlng value to pixel equivalent
  const point = projection.fromLatLngToDivPixel(this.latlng);

  // set left and top values from values from point variable to place marker correctly on map
  if (point && point.x && point.y) {
    this.div.style.left = `${point.x}px`;
    this.div.style.top = `${point.y}px`;
  }
};

export default CustomMarker;

const MapMarker = () => {
  // const store = useStoreState((store) => store);

  return (
    <Container onClick={() => alert("do action")}>
      £{Math.round(Math.random() * 1000)}
    </Container>
  );
};