React Google Map with Directions Rendered，如何传递方向道具？

Question

我对带有 DirectionRenderer 的 react-google-maps 地图有疑问。我尝试以多种方式传递方向道具，但我总是收到此错误：

InvalidValueError: setDirections: in 属性 routes: not an Array

我定义如下：

state= {
      a: new google.maps.LatLng(41.8507300, -87.6512600),
      b: new google.maps.LatLng(41.8525800, -87.6514100)
};

然后通过这里但是得到描述的错误

<MapWithADirectionsRenderer 
       directions={ how to pass here? } />

我还有另一个问题：我收到这个错误：

您在此页面上多次包含 Google 地图 API。这可能会导致意外错误。

我在 public_html/index.html 中将脚本标记添加到 api google 中，并且还在 googleMapURL 上的组件 MapWithADirectionsRenderer 中添加了请求的参数，例如官方示例（https://tomchentw.github.io/react-google-maps/#directionsrenderer）。我无法删除 index.html 上的脚本，因为如果删除它，我会得到 'google undefined error' 。我在文件的开头使用了 /*global google */ 我使用了 'new google.maps..ecc 就像在另一个堆栈溢出 post.

中描述的那样

Answer 1

您可以创建一个新项目并测试以下文件：

App.js

import React from 'react'
import MapWithADirectionsRenderer from './MapWithADirectionsRenderer'

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      myArray: [
        {lat: -34.397, lng: 150.644},
        {lat: -24.397, lng: 140.644},
        {lat: -14.397, lng: 130.644},
      ]
    };
  };

  render() {
    return (
      <div>
        {
          this.state.myArray.map((a,index) => {
            return <MapWithADirectionsRenderer
              direction={a}
              key={index}
            />
          })
        }
      </div>
    );
  }
}

MapWithADirectionsRenderer.js

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

export default class MapWithADirectionsRenderer extends React.Component {
  render() {
    return (
      <div>
        <MyMapComponent
          key={this.props.key}
          isMarkerShown
          googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
          loadingElement={<div style={{height: `100%`}}/>}
          containerElement={<div style={{height: `400px`}}/>}
          mapElement={<div style={{height: `50%`}}/>}
          direction={this.props.direction}
        />
      </div>
    )
  }
}


const MyMapComponent = withScriptjs(withGoogleMap((props) =>
  <GoogleMap
    defaultZoom={8}
    defaultCenter={{lat: props.direction.lat, lng: props.direction.lng}}
  >
    {props.isMarkerShown && <Marker position={{lat: -34.397, lng: 150.644}}/>}
  </GoogleMap>
));

Answer 2

我终于通过修改

中的标准代码解决了如下问题

DirectionsService.route({
    origin: new google.maps.LatLng(41.8507300, -87.6512600),
    destination: new google.maps.LatLng(41.8525800, -87.6514100),
    travelMode: google.maps.TravelMode.DRIVING,
  }, (result, status) => {
    etc etc
  });

至

DirectionsService.route({
    origin: this.props.origin,
    destination: this.props.destination,
    travelMode: google.maps.TravelMode.DRIVING,
  }, (result, status) => {
     etc etc
  });

以及像这样的通行证起点和终点道具

<MapWithADirectionsRenderer
    origin={this.state.origin} destination={this.state.destination} />

现在效果很好！

React Google Map with Directions Rendered，如何传递方向道具？

React Google Map with DirectionsRendered, how to pass directions props?

google-maps

google-maps-api-3

reactjs

react-google-maps