javascript - 在谷歌地图 react 的标记上添加工具提示

Question

当鼠标悬停在 google-maps-react 中时，我试图在 google map 标记上弹出工具提示(或气球)。我发现他们支持 onMouseover，但我不确定我需要在我的回调函数或 css 中添加什么来实现它。

这是我的 google_map.js

import React, { Component } from 'react';
import Map, { Marker } from 'google-maps-react';
import ReactTooltip from 'react-tooltip';

export default class GoogleMap extends Component {
  constructor(props) {
    super(props);
    this.renderTrucks = this.renderTrucks.bind(this);
  }

  onMouseoverMarker(props, marker, e) {
    // Code here to show tooltip when hovered??
  }

  renderTrucks() { 
    if (this.props.list.length === 0) {
      return;
    }   

    return this.props.list.map((truckInfo) => {
      return (<Marker
        key={truckInfo.objectid}
        name={truckInfo.applicant}
        onMouseover={this.onMouseoverMarker} 
        position={{lat:truckInfo.latitude, lng:truckInfo.longitude}} />
      );
    });
  }


  render() {

    return (
      <Map google={window.google}
        className={'map'}
        style={{width: '50%', height: '80%', position: 'relative'}}
        zoom={13}>
        {this.renderTrucks()}
      </Map>
    );
  }
}

由于这是我第一次同时使用 React 和 google map，所以我不太确定如何自己实现。如果有人可以提供帮助，我将不胜感激。

谢谢!

Answer 1

有很多方法可以做到这一点。下面是一个示例悬停标记组件。

import React, { Component } from 'react';
import { Marker, InfoWindow } from 'react-google-maps';
class CustomMarker extends Component {
    state = {
        showInfoWindow: false
    };
    handleMouseOver = e => {
        this.setState({
            showInfoWindow: true
        });
    };
    handleMouseExit = e => {
        this.setState({
            showInfoWindow: false
        });
    };
    render() {
        const { showInfoWindow } = this.state;
        const { info, lat, lng } = this.props;
        return (
            <Marker position={{ lat, lng }} onMouseOver=
{this.handleMouseOver} onMouseOut={this.handleMouseExit}>
                {showInfoWindow && (
                    <InfoWindow>
                        <h4>{info}</h4>
                    </InfoWindow>
                )}
            </Marker>
        );
    }
}
export default CustomMarker;

您可以使用以下格式的数据在您的 map 中实现它:

const data = [
    {info: 'Rome', lat: 41.903, lng: 12.496},
    {info: 'New York', lat: 40.712, lng:-74.005}
]

您可以使用以下 JSX 将标记放在 map 中:

{data.map(props => <CustomMarker {...props} />)}