将方向API响应对象拉入地图?

时间:2017-02-02 11:11:40

标签: javascript api google-maps reactjs

我已经使用GoogleMaps api返回从A到B的路线/路线对象。并使用react-google-maps渲染地图。这些是单独的API。

如何将路径从路线API ...传递到地图api的地图 - 所以我可以绘制说明路线的红线?

我在想r / g / m可能有一个你可以使用的道具directions={api.response.routesArrayHere},但我正在用它画空白。

API响应:api response directions array

反应-谷歌-地图:

import React from 'react';
import { GoogleMapLoader, GoogleMap, Marker } from 'react-google-maps';

class Map extends React.Component {
  render() {

    const mapContainer = <div style={{height: '100%', width: '100%', border: '5px solid black', borderColor: 'rgba(4, 3, 75, 0.3)'}}></div>;

    const markers = this.props.markers.map((yourLocation, i) => {
      const marker = {
        position: {
          lat: yourLocation.location.lat,
          lng: yourLocation.location.lng
        }
      };

      return <Marker key={i} {...marker} />;
    });
    return (
    <GoogleMapLoader
      containerElement = {mapContainer}
      googleMapElement = {
          <GoogleMap
              defaultZoom={10}
              defaultCenter={this.props.center}
              options={{streetViewControl: false, mapTypeControl: false}}>
              {markers}
          </GoogleMap>
      } />

    );
  }
}

Map.propTypes = {
  center: React.PropTypes.object.isRequired,
  markers: React.PropTypes.array.isRequired
};

export default Map;

0 个答案:

没有答案