如何在react中从google地图方向中删除之前的路线？

在React中删除之前的Google地图方向路线，可以通过以下步骤实现：

首先，确保你已经在React项目中集成了Google地图。你可以使用第三方库如react-google-maps或直接使用Google Maps JavaScript API。
在React组件中，创建一个状态变量来存储当前的路线。可以使用useState钩子来实现：

import React, { useState } from 'react';

const MapComponent = () => {
  const [directions, setDirections] = useState(null);

  // 其他代码...

  return (
    <div>
      {/* 地图组件 */}
    </div>
  );
};

export default MapComponent;

在获取到路线之后，将路线保存到状态变量中。你可以使用Google Maps Directions Service来获取路线信息。以下是一个简单的示例：

import React, { useState } from 'react';

const MapComponent = () => {
  const [directions, setDirections] = useState(null);

  const handleGetDirections = () => {
    const directionsService = new window.google.maps.DirectionsService();

    const request = {
      origin: '起点',
      destination: '终点',
      travelMode: 'DRIVING',
    };

    directionsService.route(request, (result, status) => {
      if (status === 'OK') {
        setDirections(result);
      }
    });
  };

  // 其他代码...

  return (
    <div>
      <button onClick={handleGetDirections}>获取路线</button>
      {/* 地图组件 */}
    </div>
  );
};

export default MapComponent;

在地图组件中，根据状态变量中的路线信息渲染地图和路线。你可以使用Google Maps Directions Renderer来实现。以下是一个简单的示例：

import React, { useState, useEffect, useRef } from 'react';

const MapComponent = () => {
  const [directions, setDirections] = useState(null);
  const mapRef = useRef(null);
  const directionsRendererRef = useRef(null);

  useEffect(() => {
    if (directions && mapRef.current) {
      const map = new window.google.maps.Map(mapRef.current, {
        center: { lat: 0, lng: 0 },
        zoom: 8,
      });

      directionsRendererRef.current = new window.google.maps.DirectionsRenderer();
      directionsRendererRef.current.setMap(map);
      directionsRendererRef.current.setDirections(directions);
    }
  }, [directions]);

  const handleDeleteDirections = () => {
    if (directionsRendererRef.current) {
      directionsRendererRef.current.setMap(null);
      setDirections(null);
    }
  };

  return (
    <div>
      <button onClick={handleDeleteDirections}>删除路线</button>
      <div ref={mapRef} style={{ width: '100%', height: '400px' }} />
    </div>
  );
};

export default MapComponent;

在上述代码中，我们使用useEffect钩子来监听directions状态变量的变化。当directions有新的值时，我们创建一个新的地图实例，并使用DirectionsRenderer来渲染路线。