Question

我尝试显示方向在2点之间的gmap。所以我建立了：

一个容器类：

import React, { Component } from 'react';
import { DirectionsRenderer } from 'react-google-maps';
import Map from './Map';

class MapContainer extends Component {
  constructor(props) {
    super(props);
    this.state = { directions: null };
  }
  componentWillMount() {
    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}`);
        }
      }
    );
  }
  render() {
    return (
      <Map
        googleMapURL={`https://maps.googleapis.com/maps/api/js?key=<APIKEY>&v=3.exp&libraries=geometry,drawing,places`}
        loadingElement={<div style={{ height: `100%` }} />}
        containerElement={<div style={{ height: `600px`, width: `100%` }} />}
        mapElement={<div style={{ height: `100%` }} />}
        directions={this.state.directions}
      />
    );
  }
}

export default MapContainer;

它检测REACT生命周期并从GMaps API获取JS代码，然后将其传递给Map组件：

import React, { Component } from 'react';
import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker,
  DirectionsRenderer
} from 'react-google-maps';
import package_ico from '../img/package.png';

const Map = withScriptjs(
  withGoogleMap(props => {
    const marker_package = (
      <Marker
        position={{
          lat: 41.85073,
          lng: -87.65126
        }}
        icon={package_ico}
      />
    );
    const marker_destination = (
      <Marker
        position={{
          lat: 41.85258,
          lng: -87.65141
        }}
      />
    );
    if (props.directions != null) {
      console.log('renderdir');
      console.log(props.directions);

      return (
        <GoogleMap defaultZoom={14} center={{ lat: 41.85073, lng: -87.65126 }}>
          {marker_package}
          {marker_destination}
          {props.directions && (
            <DirectionsRenderer directions={props.directions} />
          )}
        </GoogleMap>
      );
    } else {
      console.log('rendernodirec');
      return (
        <GoogleMap defaultZoom={14} center={{ lat: 41.85073, lng: -87.65126 }}>
          {marker_package}
          {marker_destination}
        </GoogleMap>
      );
    }
  })
);

export default Map;

数据正确地从MapContainer传递到了Map，但随后似乎是用来管理结果的DirectionsRenderer组件似乎未正确提取数据，并且出现了以下错误消息。

57 Uncaught Fc {message: "not a LatLngBounds or LatLngBoundsLiteral: unknown property f", name: "InvalidValueError", stack: "Error↵    at new Fc (https://maps.googleapis.com/m…3.exp&libraries=geometry,drawing,places:170:4324)"}
message: "not a LatLngBounds or LatLngBoundsLiteral: unknown property f"
name: "InvalidValueError"

我在做什么错？我尝试遵循以下示例：https://tomchentw.github.io/react-google-maps/#directionsrenderer，但是我想避免使用recompose，因为我发现它相当令人困惑...

感谢您的反馈。

Answer 1

我无法重现相同的错误，但这可能是加载Google Maps脚本的顺序。由于您使用的是withScriptJs，因此对google.maps.*的调用应位于由withScriptJs包裹的组件内，在您的示例中，该组件在外部。尝试将componentWillMount函数移至Map组件中，如下例所示。

如果这可以解决问题，则是由于竞争情况，这是由于在触发componentWillMount且google.maps.*不可用之前未加载Google Maps脚本引起的。

我在CodeSandbox here上有一个工作示例。大多数代码是从上面的示例中复制的。只需输入您的API密钥即可。

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

class Map extends React.Component {
  constructor(props) {
    super(props);
    this.state = { directions: null };
  }

  componentWillMount() {
    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}`);
        }
      }
    );
  }

  render() {
    const marker_package = (
      <Marker
        position={{
          lat: 41.85073,
          lng: -87.65126
        }}
      />
    );
    const marker_destination = (
      <Marker
        position={{
          lat: 41.85258,
          lng: -87.65141
        }}
      />
    );
    if (this.state.directions != null) {
      console.log("renderdir");
      console.log(this.state.directions);

      return (
        <GoogleMap defaultZoom={14} center={{ lat: 41.85073, lng: -87.65126 }}>
          {marker_package}
          {marker_destination}
          {this.state.directions && (
            <DirectionsRenderer directions={this.state.directions} />
          )}
        </GoogleMap>
      );
    } else {
      console.log("rendernodirec");
      return (
        <GoogleMap defaultZoom={14} center={{ lat: 41.85073, lng: -87.65126 }}>
          {marker_package}
          {marker_destination}
        </GoogleMap>
      );
    }
  }
}

export default withScriptjs(withGoogleMap(Map));

从GMaps API传递回调到react-google-maps的DirectionsRenderer组件的问题

1 个答案: