0

我对带有 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 以及 googleMapURL 上的组件 MapWithADirectionsRenderer 上包含脚本标记到 googleMapURL 请求的参数，如官方示例（https://tomchentw.github.io/react-google-maps/#directionsrenderer）。我无法删除 index.html 上的脚本，因为如果我删除它，我会收到 'google undefined error' 。我在文件的开头使用了 /*global google */ 我使用 'new google.maps..ecc 就像在另一个堆栈溢出帖子中描述的那样。

4

2 回答 2

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

现在效果很好！

于 2018-03-05T14:36:50.710 回答
0

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

应用程序.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>
));
于 2018-03-05T00:58:13.393 回答