0
我正在與react-google-maps軟件包https://github.com/tomchentw/react-google-maps合作，向google maps javascript API請求服務https://developers.google.com/maps/documentation/javascript/examples/directions-simple發出請求。我按預期從API獲取響應並將其記錄到瀏覽器，但我無法弄清楚如何讓地圖組件中的多段線渲染。React-google-maps渲染路線
這行代碼 directionsDisplay.setMap(map); 返航的
"InvalidValueError: setMap: not an instance of Map directions".
錯誤所以我評論它，因爲它似乎映射通過將handleMapLoad()的GoogleMap的組件通過裁判組。有關如何顯示多段線的一些指導將非常感激。
/*global google*/
import React, { Component } from "react";
import { withGoogleMap, GoogleMap } from "react-google-maps";
const GettingStartedGoogleMap = withGoogleMap(props => (
<GoogleMap
ref={props.onMapLoad}
defaultZoom={5}
defaultCenter={{lat: 41.85, lng: -117.65}}
>
</GoogleMap>
));
export default class GettingStartedExample extends Component {
handleMapLoad = this.handleMapLoad.bind(this);
handleMapLoad(map) {
this.mapComponent = map;
if (map) {
console.log(map.getZoom());
}
const directionsService = new google.maps.DirectionsService();
const directionsDisplay = new google.maps.DirectionsRenderer();
// directionsDisplay.setMap(map);
const makeRequest = function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
};
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
directionsService.route({
origin: 'San Francisco',
destination: 'Portland',
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
console.log(response)
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
makeRequest();
}
render() {
return (
<div style={{height: `500px`}}>
<GettingStartedGoogleMap
containerElement={<div style={{ height: `100%` }} />}
mapElement={<div style={{ height: `100%` }} />}
onMapLoad={this.handleMapLoad}
/>
</div>
);
}
}