Googleマップのマーカーにツールチップを追加反応

Question

google-maps-reactで表示されたときに、Googleマップマーカーでツールチップ（またはバルーン）をポップしようとしています。私は彼らがonMouseoverをサポートしていることが判明しましたが、私はコールバック関数またはcssを追加する必要があるかどうかは分かりません。これは一緒に反応し、Googleマップ使用して私の最初の時間ですので、私は、私は私自身のことで、これを実現することができる方法はかなりよく分からないので、ここで

は私の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> 
    ); 
    } 
} 

です。誰かが何か助けてくれると、本当に感謝しています。

ありがとうございます！

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} />)}