reactjs - react-google-maps で変更マーカー テキストのみが必要な場合、マップ全体が再レンダリングされます。

Question

react-google-maps パッケージを使用して、マーカーの場所の住所を表示する情報ウィンドウを持つドラッグ可能なマーカーで地図を表示しようとしています。

今のところ動作し、住所を取得して表示できますが、実際にはマーカー情報ウィンドウのみを再レンダリングする必要があるのに、マップ全体を再レンダリングするという問題に遭遇しました。

これはおそらく、マップ コンポーネントの状態に格納されている、handleOriginMarkerChange() で originaddress と座標を設定するときに、マップ コンポーネントの状態を変更しているためです。私は反応するのが初めてで、これを解決する適切な方法がわからないので、正しい方向を指していると役に立ちます!

以下は私のMap.jsのコードです

import React, { Component } from 'react';
import {InfoWindow, withGoogleMap, GoogleMap ,Marker,MarkerWithLabel} from 'react-google-maps';

class Map extends Component {

    constructor (props) {
        super(props)
        this.state = {
          destination:"default",
          showSecondMarker:false,
          originLat:0.0,
          originLng:0.0,
          destinationLat:0.0,
          destinationLng:0.0,
          originAddress:"",
          destinationAddress:"",
        };

        this.handleOriginMarkerChange = this.handleOriginMarkerChange.bind(this);

      }

   handleOriginMarkerChange(e){
       Geocoder.getFromLatLng(e.latLng.lat(), e.latLng.lng()).then(
             json => {
               var address_component = json.results[0].formatted_address;
               address_component= address_component.substring(0, address_component.indexOf(','));
               this.setState({originAddress:address_component,originLat:e.latLng.lat(),originLng:e.latLng.lng()});
             },
             error => {
               alert(error);
             }
           );
   }

   render() {

       const GoogleMapExample = withGoogleMap(props => (
      <GoogleMap
        center={center}
        zoom={this.getZoomLevel()}
        onClick={props.onMapClick}
        defaultOptions={{ styles: mapStyle,
                fullscreenControl:true,
                rotateControl: false,
                mapTypeControl: false,
                streetViewControl: false }}
      >
      {props.showSecondMarker && <Marker options={{icon: '/icon_to.png'}} draggable={!this.state.isDestinationSelected} onClick={this.destinationMarkerClicked} onDragEnd={this.handleDestinationMarkerChange} position={{ lat:this.state.destinationLat , lng: this.state.destinationLng }} >
          {this.state.showDestinationInfoWindow &&<InfoWindow>
            <div className="info-window-style">
            <h4>{this.state.destinationAddress}</h4>
            {destinationInfoButton}
            </div>
          </InfoWindow>}
      </Marker>}}
      {<Marker draggable={!this.state.isOriginSelected} options={{icon: '/icon_from.png'}} onDragEnd={this.handleOriginMarkerChange} onClick={this.originMarkerClicked} position={{ lat:this.state.originLat, lng:this.state.originLng }}>
          {this.state.showOriginInfoWindow &&<InfoWindow>
            <div className="info-window-style">
            <h4>{this.state.originAddress}</h4>
            {originInfoButton}
            </div>
          </InfoWindow>}
      </Marker>}
      </GoogleMap>
   ));



   return(
      <div style={{ height: 350,
width: '100%',
display: 'flex',
flexFlow: 'row nowrap',
justifyContent: 'center',
padding: 0 }}>
        <GoogleMapExample
          showSecondMarker={this.state.showSecondMarker}
          onMapClick={this.handleMapClick}
          containerElement={ <div style={{ width: "100%", marginLeft: 0,marginRight:10}}/> }
          mapElement={ <div style={{ height: `200%` }} /> }
        />
      </div>
   );
   }
};
export default Map;