使用路线渲染Google地图，如何传递路线道具？

Posted 2021-05-06

我在使用DirectionRenderer的react-google-maps地图时遇到问题。我试图在很多方面传递道具道具，但我总是得到这个错误：

InvalidValueError：setDirections：在属性路由中：不是数组

我的定义如下：

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 Maps 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就像在另一个堆栈溢出帖子中描述的那样。

答案

我终于通过修改标准代码解决了以下问题

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} /> 

现在它运作良好！

另一答案

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

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>
));