是否可以在React的Google地图图钉上添加悬停？

Question

有没有一种方法可以在针脚悬停时添加带有一些文本的工具提示？提前谢谢！

Answer 1

import React, { Component } from "react";
import { compose } from "recompose";
import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker,
  InfoWindow
} from "react-google-maps";

const MapWithAMarker = compose(
  withScriptjs,
  withGoogleMap
)(props => {
  console.log(props.markers);

  return (
    <GoogleMap      
      defaultZoom={20}
      defaultCenter={{
        lat: props.markers[0].latitude,
        lng: props.markers[0].longitude
      }}
    >
      {props.markers.map(marker => {
        const onClick = props.onClick.bind(this, marker);
        return (
          <Marker
            key={marker.id}
            onClick={onClick}
            position={{ lat: marker.latitude, lng: marker.longitude }}
          >
            {props.selectedMarker === marker && (
              <InfoWindow>
                <div>{marker.locationName}</div>
              </InfoWindow>
            )}
          </Marker>
        );
      })}
    </GoogleMap>
  );
});

export default class Map extends Component {
  constructor(props) {
    super(props);
    this.state = {
      shelters: [],
      selectedMarker: false
    };
  }

  handleClick = (marker, event) => {
    this.setState({ selectedMarker: marker });
  };

  render() {
    const data = this.props.data;

    return (
      <MapWithAMarker
        selectedMarker={this.state.selectedMarker}
        markers={data.records}
        onClick={this.handleClick}
        googleMapURL="https://maps.googl....."
        loadingElement={<div style={{ height: `100%` }} />}
        containerElement={<div style={{ height: `calc(100vh` }} />}
        mapElement={<div style={{ height: `100%` }} />}
      />
    );
  }
}