我已经使用GoogleMaps api返回从A到B的路线/路线对象。并使用react-google-maps渲染地图。这些是单独的API。
如何将路径从路线API ...传递到地图api的地图 - 所以我可以绘制说明路线的红线?
我在想r / g / m可能有一个你可以使用的道具directions={api.response.routesArrayHere}
,但我正在用它画空白。
反应-谷歌-地图:
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;