3
votes

Afficher les directions avec React Google Maps

Je suis nouveau dans React et j'essaie d'utiliser Google Maps pour afficher les itinéraires. J'ai pu le faire afficher un seul marqueur mais je n'ai pas trouvé comment reconfigurer le code pour afficher les directions. Voici ma dernière tentative mais elle n'affichera que la carte ... toute aide est appréciée:

import React, { Component } from 'react';
import { withGoogleMap, GoogleMap, DirectionsRenderer } from 'react-google-maps';
class Map extends Component {
   render() {
   const GoogleMapExample = withGoogleMap(props => (
      <GoogleMap
        defaultCenter = { { lat: 40.756795, lng: -73.954298 } }
        defaultZoom = { 13 }
      >

<DirectionsRenderer origin={{ lat: 40.756795, lng: -73.954298 }} destination={{ lat: 41.756795, lng: -78.954298 }} />
      </GoogleMap>
   ));
   return(
      <div>
        <GoogleMapExample
          containerElement={ <div style={{ height: `500px`, width: '500px' }} /> }
          mapElement={ <div style={{ height: `100%` }} /> }
        />
      </div>
   );
   }
};
export default Map;

J'ai la clé API dans une balise de script dans index.html

reactjs google-maps react-google-maps

0 commentaires

3 Réponses :

6
votes

DirectionsRenderer le composant n'accepte pas les accessoires origin et destination , directions prop doit être fourni à la place dont la valeur représente la réponse de DirectionsService , par exemple:

const directionsService = new google.maps.DirectionsService();

const origin = { lat: 40.756795, lng: -73.954298 };
const destination = { lat: 41.756795, lng: -78.954298 };

directionsService.route(
  {
    origin: origin,
    destination: destination,
    travelMode: google.maps.TravelMode.DRIVING
  },
  (result, status) => {
    if (status === google.maps.DirectionsStatus.OK) {
      this.setState({
        directions: result
      });
    } else {
      console.error(`error fetching directions ${result}`);
    }
  }
);

où

<DirectionsRenderer
      directions={this.state.directions}
 />

Démo

1 commentaires

Merci! Cela a énormément aidé

2
votes

Cela devrait être un exemple suffisant pour que vous puissiez travailler avec

/*global google*/
import React, { Component } from "react";
import {
    withGoogleMap,
    withScriptjs,
    GoogleMap,
    DirectionsRenderer
} from "react-google-maps";
class Map extends Component {
    state = {
        directions: null,


};

componentDidMount() {
    const directionsService = new google.maps.DirectionsService();

    const origin = { lat: 6.5244, lng:  3.3792 };
    const destination = { lat: 6.4667, lng:  3.4500};

    directionsService.route(
        {
            origin: origin,
            destination: destination,
            travelMode: google.maps.TravelMode.DRIVING,
            waypoints: [
                {
                    location: new google.maps.LatLng(6.4698,  3.5852)
                },
                {
                    location: new google.maps.LatLng(6.6018,3.3515)
                }
            ]
        },
        (result, status) => {
            if (status === google.maps.DirectionsStatus.OK) {
                console.log(result)
                this.setState({
                    directions: result
                });
            } else {
                console.error(`error fetching directions ${result}`);
            }
        }
    );
}

render() {
    const GoogleMapExample = withGoogleMap(props => (
        <GoogleMap
            defaultCenter={{ lat: 6.5244, lng:  3.3792 }}
            defaultZoom={13}
        >
            <DirectionsRenderer
                directions={this.state.directions}
            />
        </GoogleMap>
    ));

    return (
        <div>
            <GoogleMapExample
                containerElement={<div style={{ height: `500px`, width: "500px" }} />}
                mapElement={<div style={{ height: `100%` }} />}
            />
        </div>


       );
    }
}

export default Map;

Et votre fichier Map.js devrait ressembler à ceci

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { withScriptjs } from "react-google-maps";




import  Map from './components/Map';

function App() {

  const MapLoader = withScriptjs(Map);

  return (

<div className="App">
  <header className="App-header">
    <img src={logo} className="App-logo" alt="logo" />

  </header>
  <MapLoader
      googleMapURL="https://maps.googleapis.com/maps/api/js?key=Key"
      loadingElement={<div style={{ height: `100%` }} />}
  />
</div>
  );
}

export default App;

J'espère que cela vous aidera

0 commentaires

2
votes

Similaire aux réponses de @VadimGremyachev et @ EmmanuelAdebayo (merci beaucoup!), mais avec une fonction de flèche et un hook useState:

import React from "react";
import "../styles/Home.css";
import { useSelector } from "react-redux";
import { googleMapsApiKey } from "../../data/constants";
import { withScriptjs, withGoogleMap } from "react-google-maps";
import Map from "../presentational/Map";

const Home = () => {
  const WrappedMap = withScriptjs(withGoogleMap(Map));
  const formattedOrigin = useSelector(
    (state) => state.routeCalculatorReducer.loadCost?.originGeoCodedFormatted
  );
  const formattedDestination = useSelector(
    (state) =>
      state.routeCalculatorReducer.loadCost?.destinationGeoCodedFormatted
  );

  return (
    <main className="home">
      <section className="map">
        <WrappedMap
          googleMapURL={`https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing,places&key=${googleMapsApiKey}`}
          loadingElement={<div style={{ height: `100%` }} />}
          containerElement={<div style={{ height: "80vh" }} />}
          mapElement={<div style={{ height: `100%` }} />}
          formattedOrigin={formattedOrigin}
          formattedDestination={formattedDestination}
        />
      </section>
    </main>
  );
};

export default Home;

Et puis à partir de votre composant d'ordre supérieur:

import React, { useState } from "react";
import { GoogleMap, Marker, DirectionsRenderer } from "react-google-maps";
/* global google */

const Map = ({ formattedOrigin, formattedDestination }) => {
  const DirectionsService = new google.maps.DirectionsService();
  let [directions, setDirections] = useState("");

  DirectionsService.route(
    {
      origin: formattedOrigin,
      destination: formattedDestination,
      travelMode: google.maps.TravelMode.DRIVING,
    },
    (result, status) => {
      if (status === google.maps.DirectionsStatus.OK) {
        setDirections(result);
      } else {
        console.error(`error fetching directions ${result}`);
      }
    }
  );
  return (
    <section className="googleMap">
      <GoogleMap defaultZoom={9} defaultCenter={{ lat: 41.75, lng: 1.8 }}>
        <Marker position={formattedOrigin} />
        <Marker position={formattedDestination} />
        {directions && <DirectionsRenderer directions={directions} />}
      </GoogleMap>
    </section>
  );
};

export default Map;

0 commentaires