我正在尝试使用react-google-maps在两点之间绘制一条路线,但对我不起作用。您能帮我解决这个问题吗?这是我的react组件的示例。
import React from 'react'; import { withScriptjs, withGoogleMap, GoogleMap, Marker, } from 'react-google-maps'; import MapDirectionsRenderer from './app_map_directions_render'; const Map = withScriptjs( withGoogleMap(props => ( <GoogleMap defaultCenter={props.defaultCenter} defaultZoom={props.defaultZoom} > {props.places.map((marker, index) => { const position = {lat: marker.latitude, lng: marker.longitude}; return <Marker key={index} position={position}/>; })} <MapDirectionsRenderer places={props.places} travelMode={window.google.maps.TravelMode.DRIVING} /> </GoogleMap> )) ); const AppMap = props => { const {places} = props; const { loadingElement, containerElement, mapElement, defaultCenter, defaultZoom } = props; return ( <Map googleMapURL={ 'https://maps.googleapis.com/maps/api/js?key=' + googleMapsApiKey + '&v=3.exp&libraries=geometry,drawing,places' } places={places} loadingElement={loadingElement || <div style={{height: `100%`}}/>} containerElement={containerElement || <div style={{height: "80vh"}}/>} mapElement={mapElement || <div style={{height: `100%`}}/>} defaultCenter={defaultCenter || {lat: 25.798939, lng: -80.291409}} defaultZoom={defaultZoom || 11} /> ); }; export default AppMap;
还有我的MapDirectionsRenderer组件
MapDirectionsRenderer
import React, {Component} from 'react'; import { DirectionsRenderer } from "react-google-maps"; export default class MapDirectionsRenderer extends Component { state = { directions: null, error: null }; componentDidMount() { const { places, travelMode } = this.props; const waypoints = places.map(p =>({ location: {lat: p.latitude, lng: p.longitude}, stopover: true })) if(waypoints.length >= 2){ const origin = waypoints.shift().location; const destination = waypoints.pop().location; const directionsService = new window.google.maps.DirectionsService(); directionsService.route( { origin: origin, destination: destination, travelMode: travelMode, waypoints: waypoints }, (result, status) => { if (status === window.google.maps.DirectionsStatus.OK) { this.setState({ directions: result }); } else { this.setState({ error: result }); } } ); } } render() { if (this.state.error) { return <h1>{this.state.error}</h1>; } return <DirectionsRenderer directions={this.state.directions} />; } }
要呈现路线,Google Maps API提供了Directions Service,如果有可用的react- google-maps库 DirectionsRenderer组件,它是DirectionsRenderer类的包装,这又依次是:
react- google-maps
DirectionsRenderer
渲染从中获得的方向DirectionsService。
DirectionsService
假定以以下格式提供用于路由的数据:
const places = [ {latitude: 25.8103146,longitude: -80.1751609}, {latitude: 27.9947147,longitude: -82.5943645}, {latitude: 28.4813018,longitude: -81.4387899}, //... ]
可以引入以下组件来通过库来 计算和呈现路线 :react-google-maps
react-google-maps
class MapDirectionsRenderer extends React.Component { state = { directions: null, error: null }; componentDidMount() { const { places, travelMode } = this.props; const waypoints = places.map(p =>({ location: {lat: p.latitude, lng:p.longitude}, stopover: true })) const origin = waypoints.shift().location; const destination = waypoints.pop().location; const directionsService = new google.maps.DirectionsService(); directionsService.route( { origin: origin, destination: destination, travelMode: travelMode, waypoints: waypoints }, (result, status) => { if (status === google.maps.DirectionsStatus.OK) { this.setState({ directions: result }); } else { this.setState({ error: result }); } } ); } render() { if (this.state.error) { return <h1>{this.state.error}</h1>; } return <DirectionsRenderer directions={this.state.directions} />; } }
这是一个演示
对于React 16.8或更高版本,MapDirectionsRenderer可以如下实现(使用Hooks):
16.8
function MapDirectionsRenderer(props) { const [directions, setDirections] = useState(null); const [error, setError] = useState(null); useEffect(() => { const { places, travelMode } = props; const waypoints = places.map(p => ({ location: { lat: p.latitude, lng: p.longitude }, stopover: true })); const origin = waypoints.shift().location; const destination = waypoints.pop().location; const directionsService = new google.maps.DirectionsService(); directionsService.route( { origin: origin, destination: destination, travelMode: travelMode, waypoints: waypoints }, (result, status) => { console.log(result) if (status === google.maps.DirectionsStatus.OK) { setDirections(result); } else { setError(result); } } ); }); if (error) { return <h1>{error}</h1>; } return ( directions && ( <DirectionsRenderer directions={directions} /> ) ); }