使用反应钩子和 google 地图 api 如何在同一张地图上用 waypoints 和单个不同标记显示一个方向？

Question

使用反应挂钩和 google 地图 API 我有一个代码可以在地图上放置一个标记，但我不知道在此代码中添加显示方向。我搜索了但找不到包含两者的地图示例，而且也没有明确的 google 地图文档用于反应挂钩。我相信很多其他人也想知道这个，在 React 中添加一个标记和方向相同的地图。我不想问非特定问题，但我不得不问。提前谢谢你

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

仅引脚标记工作代码HERE

这是我的地图组件，我已经尝试执行指示但没有成功。

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() to call the Google Maps Directions API and google.maps.DirectionsRenderer() 显示地图的方向。您可以在 useEffect 中实例化它们，使用 setMap() then pass them in the function calcRoute(directionsService, directionsRenderer)` 将 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 函数，通过设置出发地、目的地、模式和其他参数来构建 directions request。然后将它们传递给 directionService.route 以发送请求。如果 DirectionService 结果状态正常，则通过 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);
      }
    });
  }

这里是sample working code.

使用反应钩子和 google 地图 api 如何在同一张地图上用 waypoints 和单个不同标记显示一个方向？

Using react hooks and google maps api How to show one directions with waypoints and single different marker on same map?

javascript

google-maps

reactjs