個々のマーカー 'react-google-maps'の情報ウィンドウを閉じる

Question

私はReact-Google-Mapsを使用しています。私は、マーカーのクリックごとにインフォウィンドウを開いたり閉じたりしようとしています。私は自分のデータにマッピングしたときにオブジェクトにshowInfoキーを設定し、クリック時にブール値を変更する関数を呼び出します。これは私の情報ウィンドウを表示しようとしているときには機能していないようです。助言がありますか？コードはこちら。

あなたはマーカーがクリックされたときに、いくつかのロジックを実行する必要があるように見えます（）{ constのマーカー= this.props.markers.map（（アイテム、I）=> {

const marker = { 
    position: { 
     lat: item.position.lat, 
     lng: item.position.lon 
    }, 
     title: item.title, 
     showInfo: false, 
     price: `${item.price}/day`, 
     images: `http://res.cloudinary.com/letitmow/image/upload/w_40,h_40/${item.images[0]}.jpg`, 
    } 
    return <Marker 
    onClick={()=> {marker.showInfo = !marker.showInfo}} 
    {...marker}> 
{marker.showInfo && (
    <InfoWindow 
    onCloseClick={()=>{marker.showInfo = !marker.showInfo}} 
    > 
    <Link to={`/listings/${item._id}`}> 
     <div> 
     <h2>{marker.title}</h2> 
     <img src={marker.images} /> 
     <h3>{marker.price}</h3> 
     </div> 

    </Link> 

    </InfoWindow> 
)} 
    </Marker> 
}); 

Answer 1

をレンダリングします。マーカーがクリックされるたびに今、marker.showInfo がfalseに設定され、対応する情報ウィンドウがレンダリングされていません。

代わりに、多分マーカーがクリックされたときに呼び出される関数を作成してみてください。 あなたは何か、それを呼び出すことができます「handleMarkerTap」に似ています

いくつかの簡単なコードは、以下のアイデアをご提供します

変更あなたのonClicks：

onClick={() => handleMarkerTap(currentMarker)} 
onCloseClick={() => handleMarkerTap(currentMarker)} 

は、マーカーオブジェクトを受け取り、SHOWINFOプロパティを切り替え関数を作成します。

handleMarkerTap(marker) { 

    if (marker.showInfo === false) { 
    marker.showInfo = true 
    } else if (marker.showInfo === true) { 
    marker.showInfo = false 
    } 
} 

ここで、マーカーをクリックすると、そのマーカーのshowInfoプロパティをtrueに設定し、InfoWindowをレンダリングする必要があります。

こちらがお役に立てば幸いです。