使用 React Google Maps 顯示方向

Question

我是 React 的新手，正在嘗試使用谷歌地圖來顯示方向。 我已經能夠讓它顯示單個標記，但還沒有找到如何重新配置​​代碼以顯示方向。 以下是我最近的嘗試，但它只會顯示地圖......感謝任何幫助：

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;

我在 index.html 的腳本標簽中有 API 密鑰

Answer 1

DirectionsRenderer組件不接受origin和destination props，需要提供directions props 來代替哪個值表示來自DirectionsService的響應，例如：

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

在哪里

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}`);
    }
  }
);

演示

Answer 2

這應該是您可以使用的足夠示例

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;

你的 Map.js 文件應該是這樣的

/*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;

我希望這可以幫助你

Answer 3

類似於@VadimGremyachev 和@EmmanuelAdebayo 的回答（非常感謝！），但有一個箭頭函數和一個 useState 鈎子：

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;

然后從您的高階組件：

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;