如何使用google-map-react绘制路线？

使用google-map-react绘制路线可以通过以下步骤实现：

首先，确保你已经在项目中安装了google-map-react库。可以使用npm或者yarn进行安装。
在你的项目中引入google-map-react库，并在代码中创建一个地图组件。

import React from 'react';
import GoogleMapReact from 'google-map-react';

const Map = () => {
  return (
    <div style={{ height: '400px', width: '100%' }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: 'YOUR_API_KEY' }}
        defaultCenter={{ lat: 37.7749, lng: -122.4194 }}
        defaultZoom={10}
      >
      </GoogleMapReact>
    </div>
  );
}

export default Map;

在上面的代码中，我们创建了一个名为Map的组件，并在其中使用GoogleMapReact组件来渲染地图。需要注意的是，你需要将YOUR_API_KEY替换为你自己的Google Maps API密钥。

接下来，我们需要在地图上绘制路线。可以使用DirectionsService和DirectionsRenderer来实现。

import React, { useEffect } from 'react';
import GoogleMapReact from 'google-map-react';

const Map = () => {
  useEffect(() => {
    const directionsService = new window.google.maps.DirectionsService();
    const directionsRenderer = new window.google.maps.DirectionsRenderer();

    const map = new window.google.maps.Map(document.getElementById('map'), {
      center: { lat: 37.7749, lng: -122.4194 },
      zoom: 10,
    });

    directionsRenderer.setMap(map);

    const calculateAndDisplayRoute = (directionsService, directionsRenderer) => {
      directionsService.route(
        {
          origin: { lat: 37.7749, lng: -122.4194 },
          destination: { lat: 37.7749, lng: -122.4316 },
          travelMode: 'DRIVING',
        },
        (response, status) => {
          if (status === 'OK') {
            directionsRenderer.setDirections(response);
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        }
      );
    };

    calculateAndDisplayRoute(directionsService, directionsRenderer);
  }, []);

  return (
    <div id="map" style={{ height: '400px', width: '100%' }}></div>
  );
}

export default Map;

在上面的代码中，我们使用DirectionsService来计算路线，并使用DirectionsRenderer来在地图上渲染路线。在useEffect钩子中，我们创建了一个地图实例，并将DirectionsRenderer与地图关联起来。然后，我们调用calculateAndDisplayRoute函数来计算并显示路线。

需要注意的是，为了使用DirectionsService和DirectionsRenderer，你需要在index.html文件中引入Google Maps API的脚本。

<!DOCTYPE html>
<html>
  <head>
    <title>Map</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

确保将YOUR_API_KEY替换为你自己的Google Maps API密钥。

这样，当你在浏览器中渲染Map组件时，你将看到地图上绘制了从起点到终点的路线。

推荐的腾讯云相关产品：腾讯云地图服务（https://cloud.tencent.com/product/maps）