react-google-maps中addListener失效：拖拽路线后标记点未更新

我来帮你搞定这个拖拽路线后标记点不更新的问题！核心原因是你直接修改了markers变量，但没有触发React的状态更新机制，所以组件不会重新渲染，标记点自然不会跟着变化。下面是具体的解决方案：

1. 把Markers改成组件状态 #

首先，你需要把markers从普通变量改成React组件的state，这样当它变化时才会触发组件重渲染。如果是类组件，在构造函数里初始化：

constructor(props) {
  super(props);
  this.state = {
    markers: [],
  };
  // 用来存储DirectionsRenderer的ref
  this.directionsRef = null;
}

2. 利用onDirectionsChanged回调更新标记点 #

你已经加了onDirectionsChanged回调，但之前没有正确更新markers的状态。现在我们在这个回调里获取更新后的路线数据，提取起点、途经点和终点，然后更新state：

onDirectionsChanged={() => {
  console.log("changed from renderer");
  // 获取更新后的directions对象
  const updatedDirections = this.directionsRef.getDirections();
  if (!updatedDirections?.routes?.length) return;

  const newMarkers = [];
  const firstRoute = updatedDirections.routes[0];

  // 添加起点
  newMarkers.push(firstRoute.legs[0].start_location);

  // 添加途经点（如果有的话）
  firstRoute.legs.forEach(leg => {
    if (leg.via_waypoints?.length) {
      leg.via_waypoints.forEach(waypoint => newMarkers.push(waypoint));
    }
    // 添加当前leg的终点
    newMarkers.push(leg.end_location);
  });

  // 转换为Marker需要的{lat, lng}格式
  const formattedMarkers = newMarkers.map(point => ({
    lat: point.lat(),
    lng: point.lng()
  }));

  // 更新state，触发标记点重渲染
  this.setState({ markers: formattedMarkers });
}}

3. 修正Ref和渲染逻辑 #

确保ref正确绑定到DirectionsRenderer，并且渲染标记点时用state里的markers：

<GoogleMap 
  defaultZoom={3} 
  defaultCenter={new google.maps.LatLng({lat: 45.1983838, lng: 12.0970988})}
>
  {props.directions && (
    <DirectionsRenderer 
      options={{draggable: true}} 
      directions={props.directions} 
      ref={(r) => this.directionsRef = r} 
      onDirectionsChanged={this.onDirectionsChanged.bind(this)} // 注意绑定this
    />
  )}
  {/* 从state里取markers渲染 */}
  {this.state.markers.map((marker, i) => (
    <Marker 
      key={i} 
      position={{ lat: marker.lat, lng: marker.lng }} 
    />
  ))}
</GoogleMap>

4. 处理初始路线加载的情况 #

如果初始时props.directions已经有值，你还需要在组件挂载或props更新时初始化标记点，比如在componentDidMount和componentDidUpdate里：

componentDidMount() {
  this.initMarkersFromDirections(this.props.directions);
}

componentDidUpdate(prevProps) {
  if (prevProps.directions !== this.props.directions) {
    this.initMarkersFromDirections(this.props.directions);
  }
}

initMarkersFromDirections(directions) {
  if (!directions?.routes?.length) return;

  const newMarkers = [];
  const firstRoute = directions.routes[0];

  newMarkers.push(firstRoute.legs[0].start_location);
  firstRoute.legs.forEach(leg => {
    if (leg.via_waypoints?.length) {
      leg.via_waypoints.forEach(waypoint => newMarkers.push(waypoint));
    }
    newMarkers.push(leg.end_location);
  });

  const formattedMarkers = newMarkers.map(point => ({
    lat: point.lat(),
    lng: point.lng()
  }));

  this.setState({ markers: formattedMarkers });
}

为什么之前的代码失效？ #

你之前直接写markers = []只是修改了一个普通变量，React无法感知到这个变化，所以不会重新渲染标记点部分。只有通过setState更新状态，React才会触发组件重渲染，更新页面上的标记点。

内容的提问来源于stack exchange，提问作者batt