0

我的组件MapWithADirectionsRenderer定义如下

var markers = [];
const MapWithADirectionsRenderer = compose(

withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?...",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `100%` }} />,
    mapElement: <div style={{ height: `100%` }}/>
  }),
  withScriptjs,
  withGoogleMap,
  lifecycle({

  componentDidMount() {

  const DirectionsService = new google.maps.DirectionsService();

  DirectionsService.route({
    origin: this.props.origin,
    destination: this.props.destination,
    travelMode: google.maps.TravelMode.DRIVING,
  }, (result, status) => {

    if (status === google.maps.DirectionsStatus.OK) {

      // here I fill my marker array correctly

      this.setState({
          directions: result
      });

     } else {
      console.error(`error fetching directions ${result}`);
     }
   });
 }

 })
)(props=> 
  <GoogleMap
    defaultZoom={3}
    defaultCenter={// coordinates}
  >
    {props.directions && <DirectionsRenderer 
                            options={{draggable:true}}
                            directions={props.directions}
                            ref={(r) => directionsRef = r}
                            onDirectionsChanged={getDirections}
                             />
    }
    {markers.map( (marker,i) => (
                              <Marker
                                key={i}
                                position={{ lat: marker.lat, lng: marker.lng }}
                            >
                              </Marker>
                          ))}


  </GoogleMap>
);

但在地图上移动路线后，从谷歌获取的方向正确更新，但不是我想要显示的标记。始终显示相同的标记。

有什么方法可以更新MapWithADirectionRenderer以便它重新渲染我的标记而不仅仅是方向？谢谢

4

0 回答 0