Question

当我在google-maps-react中徘徊时，我试图在谷歌地图标记上弹出工具提示（或气球）。我发现他们支持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和谷歌地图，所以我不太确定如何通过自己的方式实现这一目标。如果有人可以提出帮助，我会非常感激。

谢谢！

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;

您可以使用以下格式的数据在地图中实现它：

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

您可以使用以下JSX将标记放在地图中：

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

添加工具提示标记为谷歌地图反应

1 个答案: