在谷歌地图的标记上添加工具提示反应答案

【问题标题】：Add tooltip on markers for google maps react在谷歌地图的标记上添加工具提示反应
【发布时间】：2016-12-22 03:21:43
【问题描述】：

我试图在 google-maps-react 中悬停时在 google 地图标记上弹出工具提示（或气球）。我发现他们支持 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，所以我不太确定如何自己实现这一点。如果有人可以提供帮助，我将不胜感激。

谢谢！

【问题讨论】：

标签： javascript css google-maps reactjs

【解决方案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} />)}

【讨论】：