使用反应钩子和谷歌地图 api 如何在同一个 map 上显示一个带有航点和单个不同标记的方向？

Question

使用反应挂钩和谷歌地图 API 我有一个代码在 map 上放置一个标记，但我不知道在此代码中添加显示方向。 我搜索但找不到包含两者的 map 示例，并且也没有针对反应挂钩的明确谷歌地图文档。 我相信许多其他人也想知道这一点，在反应中添加一个标记和方向相同的 map。 我不想问非具体的问题，但我不得不问。 先感谢您

我的目标是 map 组件将位置显示为标记，但我也有方向。

只有引脚标记工作代码在这里

这是我的 map 组件，我尝试执行指示但没有成功。

MapTest.js

import { Fragment, useEffect, useState, useRef } from 'react';
import { useGoogleMaps } from 'react-hook-google-maps';
import {
  withGoogleMap,
  withScriptjs,
  GoogleMap,
  DirectionsRenderer,
} from 'react-google-maps';

const directions = [
  {
    lat: 35,
    lng: -100,
  },
  {
    lat: 36,
    lng: -100,
  },
];
const MapTest = () => {
  const prevMarkersRef = useRef([]);
  const [directions, setDirections] = useState('');

  // incoming location to set
  let point = {
    lat: 34,
    lng: -100,
  };
  // Map options
  const { ref, map, google } = useGoogleMaps(
    'YOUR API KEY',
    {
      zoom: 8,
      center: point,
    },
    <DirectionsRenderer directions={directions} />
  );
  // directions
  if (map) {
    const directionsService = new google.maps.DirectionsService();
    const origin = {
      lat: 35,
      lng: -100,
    };
    const destination = origin;
    directionsService.route(
      {
        origin: origin,
        destination: point,
        travelMode: google.maps.TravelMode.DRIVING,
        waypoints: directions,
      },
      (result, status) => {
        if (status === google.maps.DirectionsStatus.OK) {
          console.log(result);
          setDirections(result);
        } else {
          console.error(`error fetching directions ${result}`);
        }
      }
    );
  }

  useEffect(() => {
    if (map) {
      // ADD MARKER
      const m = addMarker();
      clearMarkers(prevMarkersRef.current); //clear prev markers
      prevMarkersRef.current.push(m);
      map.setCenter(point);
    }
  }, [point]);

  // SIDE FUNCTIONS
  function addMarker() {
    return new window.google.maps.Marker({
      position: point,
      map: map,
    });
  }
  function clearMarkers(markers) {
    for (let m of markers) {
      m.setMap(null);
    }
  }

  return (
    <div>
      <div
        ref={ref}
        style={{ width: 400, height: 300 }}
      />
    </div>
  );
};

export default MapTest;

Answer 1

您可以使用google.maps.DirectionsService()调用 Google 地图方向 API 和google.maps.DirectionsRenderer()来显示到 map 的方向。 您可以在 useEffect 中实例化它们，使用setMap() then pass them in the function calcRoute(directionsService，directionsRenderer)`，它将调用 DirectionService：

  useEffect(() => {
    if (map) {
      // ADD MARKER
      const m = addMarker();
      clearMarkers(prevMarkersRef.current); //clear prev markers
      prevMarkersRef.current.push(m);
      map.setCenter(point);
      let directionsService = new google.maps.DirectionsService();
      let directionsRenderer = new google.maps.DirectionsRenderer();
      directionsRenderer.setMap(map);
      calcRoute(directionsService, directionsRenderer);
    }
  }, [point]);

对于calcRoute function，通过设置您的起点、目的地、模式和其他参数来构建路线请求。 然后将它们传递给 directionService.route 以发送请求。 如果 DirectionService 结果状态为 OK，则通过 DirectionsRenderer 显示您的结果：

function calcRoute(directionsService, directionsRenderer) {
    let request = {
      origin: point,
      destination: dest,
      travelMode: "DRIVING"
    };
    directionsService.route(request, function(result, status) {
      if (status == "OK") {
        directionsRenderer.setDirections(result);
      }
    });
  }

这是一个示例工作代码。