3

我正在尝试使用 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;
4

0 回答 0