我是 ReactJS 新手，目前正在为一个项目使用 react-google-maps，我正在使用 FourSquare API 显示一些地点，有一个方向按钮，用于显示从用户当前位置到目的地的方向。

这是 Meeting.js

/* eslint-disable no-undef */
/* global google */
import React, { Component } from 'react';
import Map from '../../Component/Map';
import MapAPI from '../../api/GoogleMap';

class Meeting extends Component {
// constructor and other stuff...

getDirections = () => {
const DirectionsService = new google.maps.DirectionsService();

DirectionsService.route(
  {
    destination: new google.maps.LatLng(24.8861479, 67.0595196),
    origin: new google.maps.LatLng(24.8812296, 67.0727269),
    travelMode: google.maps.TravelMode.DRIVING,
  },
  (result, status) => {
    if (status === google.maps.DirectionsStatus.OK) {
      this.setState({
        directions: result,
        mapLoaded: true,
        mapVisible: true,
      });
    } else {
      alert("Sorry! Can't calculate directions!");
    }
  },
);
};

render() {
const { coords, directions, mapVisible } = this.state;

return (
  <div className="section">
    {mapVisible && (
      <Map
        coords={coords}
        dragged={this.dragged}
        isMarkerShown
        directions={directions}
        googleMapURL={MapAPI}
        loadingElement={<div style={{ height: `100%` }} />}
        containerElement={<div style={{ height: `350px` }} />}
        mapElement={<div style={{ height: `100%` }} />}
      />
    )}
  </div>
);
}
}

export default Meeting;

这是 Map.js

import React from 'react';
import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker,
  DirectionsRenderer,
} from 'react-google-maps';

const Map = withScriptjs(
  withGoogleMap(props => (
    <GoogleMap
      defaultZoom={14}
      defaultCenter={{
        lat: props.coords.latitude,
        lng: props.coords.longitude,
      }}
      center={{ lat: props.coords.latitude, lng: props.coords.longitude }}
    >
      {props.isMarkerShown && (
        <Marker
          draggable={props.draggable || false}
          onDragEnd={e => props.dragged(e)}
          position={{ lat: props.coords.latitude, lng: props.coords.longitude }}
        />
      )}

      {props.directions && <DirectionsRenderer directions={props.directions} />}
    </GoogleMap>
  )),
);

export default Map;

在按钮上调用了 getDirections 函数，它既不适用于 componentDidMount，也不适用于按钮单击，在这两种情况下我都得到了相同的错误。

我认为这是因为 Google 的异步加载，但找不到解决这个问题的方法，我看到有人问同样的问题，但没有令人满意的答案。 任何帮助都将不胜感激。