如何在 react.js 中实现谷歌路由 API？答案

【问题标题】：How to implement google route API in react.js?如何在 react.js 中实现谷歌路由 API？
【发布时间】：2019-03-09 01:30:42
【问题描述】：

我遵循this 教程并实现了谷歌地图。我尝试使用Google Route API 来获取地图上两个位置之间的方向。但我不确定我做错了什么，我得到了这个错误

1 |从“./Component”导入组件；错误

2 |从“反应”导入反应；

3 |从“react-dom”导入 ReactDOM；

4 |导入 { compose, withProps, 生命周期 } from "recompose";

这是我的代码

import Component from "./Component";
import React from "react";
import ReactDOM from "react-dom";
import { compose, withProps, lifecycle } from "recompose";
import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,

} from "react-google-maps";
import { DirectionsRenderer } from "react-google-maps";

const MapWithADirectionsRenderer = compose(
  withProps({
    googleMapURL:
      "https://maps.googleapis.com/maps/api/js?key=AIzaSyAcQjrfAudzl6Ton7GA7D-gVqOINMFE7ns =3.exp&libraries=geometry,drawing,places",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `400px` }} />,
    mapElement: <div style={{ height: `100%` }} />
  }),
  withScriptjs,
  withGoogleMap,

  lifecycle({
    componentDidMount() {
      const DirectionsService = new google.maps.DirectionsService();

      DirectionsService.route(
        {
          origin: new google.maps.LatLng(41.85073, -87.65126),
          destination: new google.maps.LatLng(41.85258, -87.65141),
          travelMode: google.maps.TravelMode.DRIVING
        },
        (result, status) => {
          if (status === google.maps.DirectionsStatus.OK) {
            this.setState({
              directions: result
            });
          } else {
            console.error(`error fetching directions ${result}`);
          }
        }
      );
    }
  })
)(props => (
  <GoogleMap defaultZoom={8} defaultCenter={{ lat: -34.397, lng: 150.644 }}>
    {props.directions && <DirectionsRenderer directions={props.directions} />}
  </GoogleMap>
));

ReactDOM.render(
  < DirectionsRenderer directions />,
  document.getElementById("root")
);

【问题讨论】：

标签： javascript reactjs google-maps google-maps-api-3

【解决方案1】：

几个小时后发现出了什么问题！在 Google API 密钥之后，我错过了 &v
原来有"https://maps.googleapis.com/maps/api/js?key=AIzaSyAcQjrfAudzl6Ton7GA7D-gVqOINMFE7ns =3.exp&libraries=geometry,drawing,places"

但应该是这样的：

"https://maps.googleapis.com/maps/api/js?key=AIzaSyAcQjrfAudzl6Ton7GA7D-gVqOINMFE7ns&v=3.exp&libraries=geometry,drawing,places"

我还添加了将此行添加到我的文件顶部：/global google/ -> 用于禁用 ESLint

最终代码如下：

/*global google*/
import React from "react";
import ReactDOM from "react-dom";
//import { DirectionsRenderer } from "react-google-maps";
import { compose, withProps, lifecycle } from "recompose";
import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  DirectionsRenderer,

} from "react-google-maps";

//const google=window.google
//import { DirectionsRenderer } from "react-google-maps";

const MapWithADirectionsRenderer = compose(
  withProps({
    googleMapURL:
      "https://maps.googleapis.com/maps/api/js?key=AIzaSyAcQjrfAudzl6Ton7GA7D-gVqOINMFE7ns&v=3.exp&libraries=geometry,drawing,places",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `400px` }} />,
    mapElement: <div style={{ height: `100%` }} />
  }),
  withScriptjs,
  withGoogleMap,

  lifecycle({
    componentDidMount() {
      const DirectionsService = new google.maps.DirectionsService();

      DirectionsService.route(
        {
          origin: new google.maps.LatLng(40.712776, -74.005974),
          destination: new google.maps.LatLng(34.052235, -118.243683),
          travelMode: google.maps.TravelMode.DRIVING
        },
        (result, status) => {
          if (status === google.maps.DirectionsStatus.OK) {
            this.setState({
              directions: result
            });
          } else {
            console.error(`error fetching directions ${result}`);
          }
        }
      );
    }
  })
)(props => (
  <GoogleMap defaultZoom={8} defaultCenter={{ lat: -34.397, lng: 150.644 }}>
    {props.directions && <DirectionsRenderer directions={props.directions} />}
  </GoogleMap>
));

ReactDOM.render(
  < MapWithADirectionsRenderer directions />,
  document.getElementById("root")
);

【讨论】：