带有 react-google-maps 的自定义弹出窗口

Question

带有 react-google-maps 的自定义弹出窗口

有人知道如何使用 react-google-maps 添加自定义弹出窗口吗？我想在 google 的曲目中实现类似的目标：https://developers.google.com/maps/documentation/javascript/examples/overlay-popup。我尝试使用 Portals，但我不知道 react-google-maps 是否可行。现在我有这样的基地：



function Map(restaurants) {
  const restaurantsC = restaurants.restaurants.restaurants;

  const mapRef = useRef(null);
  // Fit bounds function

  const centerPin = (data) => {
    var latLng = new window.google.maps.LatLng(
      data.Position.lat,
      data.Position.lng
    ); //Makes a latlng
    mapRef.current.panTo(latLng);
  };

  useEffect(() => {
    const fitBounds = () => {
      const bounds = new window.google.maps.LatLngBounds();
      restaurantsC.edges.forEach((document) => {
        bounds.extend(document.node.Position);
      });
      mapRef.current.fitBounds(bounds);
    };
    fitBounds();
  }, []);

  return (
    <ContextConsumer>
      {({ data, set }) => (
        <GoogleMap
          ref={mapRef}
          defaultZoom={18}
          defaultCenter={{
            lat: restaurantsC.edges[0].node.Position.lat,
            lng: restaurantsC.edges[0].node.Position.lng,
          }}
        >
          {data.currentMapLoc ? centerPin(data.currentMapLoc) : null}
          {restaurantsC.edges.map((document, index) => (
            <>
              <Marker
                key={index}
                position={{
                  lat: document.node.Position.lat,
                  lng: document.node.Position.lng,
                }}
          
                onClick={() => {
                  set({ currentMapLoc: document.node });
                  centerPin(document.node);
                }}
              />
            </>
          ))}

          {data.currentMapLoc ? (
            <>
              {centerPin(data.currentMapLoc)}
              <InfoWindow
                key={data.currentMapLoc.id}
                position={{
                  lat: data.currentMapLoc.Position.lat,
                  lng: data.currentMapLoc.Position.lng,
                }}
                onCloseClick={() => {
                  set({ currentMapLoc: null });
                }}
              >
                <div>{data.currentMapLoc.Name}</div>
              </InfoWindow>
            </>
          ) : null}
        </GoogleMap>
      )}
    </ContextConsumer>
  );
}

const MapWrapped = withScriptjs(withGoogleMap(Map));

export default function App(restaurants) {
  return (
    <div style={{ width: "700px", height: "700px" }}>
      <MapWrapped
        restaurants={restaurants}
        googleMapURL={`url`}
        loadingElement={<div style={{ height: `100%` }} />}
        containerElement={<div style={{ height: `100%` }} />}
        mapElement={<div style={{ height: `100%` }} />}
      />
    </div>
  );
}

Answer 1

来自库 Google Maps sample link uses Custom Overlays that uses the OverlayView object.To achieve this using the react-google-maps library, you can use the OverlayView object 的自定义弹出窗口。

您可以检查此 sample code（确保将 API 密钥放入索引文件中以使代码正常工作）和下面的代码片段:

import React, { Component } from 'react';
import { withGoogleMap, GoogleMap, OverlayView } from 'react-google-maps';

const getPixelPositionOffset = (width, height) => ({
  x: -(width / 2),
  y: -(height / 2)
});

class Map extends Component {
  constructor(props) {
    super(props);

    this.state = {
      count: 0
    };
  }

  onClick = () => {
    this.setState({
      count: this.state.count + 1
    });
    console.log(this.state.count);
  };

  handleToggleClose = () => {
    this.setState({
      isOpen: false
    });
  };

  render() {
    const GoogleMapExample = withGoogleMap(props => (
      <GoogleMap
        defaultCenter={{ lat: 40.756795, lng: -73.954298 }}
        defaultZoom={13}
      >
        <OverlayView
          position={{ lat: 40.756795, lng: -73.954298 }}
          mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
          getPixelPositionOffset={getPixelPositionOffset}
        >
          <div>
            <div class="popup-bubble">
              <h1>OverlayView</h1>
              <button onClick={this.onClick} style={{ height: 60 }}>
                I have been clicked {this.state.count} time
                {this.state.count > 1 ? `s` : ``}
              </button>
            </div>
            <div class="popup-bubble-anchor" />
          </div>
        </OverlayView>
      </GoogleMap>
    ));

    return (
      <div>
        <GoogleMapExample
          containerElement={<div style={{ height: `500px`, width: '500px' }} />}
          mapElement={<div style={{ height: `100%` }} />}
        />
      </div>
    );
  }
}

export default Map;

带有 react-google-maps 的自定义弹出窗口

Custom Popups with react-google-maps

javascript

reactjs

google-maps

react-google-maps