谷歌 map 與 react-google-maps API

Question

我是地圖新手，我需要實施路線並獲得距離。 我正在使用 react-google-map的API 並且我發現這種方式可以顯示 map 和路線。

這是我第一次構建這樣的組件，現在我不知道如何訪問 class 組件之外的數據。 基本上，我想將搜索框（坐標）中的數據添加到 DirectionService.route 中的原點，並獲取距離。 你知道我怎樣才能訪問這些數據嗎？

我一直在閱讀 componentWillMount 已被棄用，但這是我使它工作的唯一方法，如果您有任何建議，我很樂意嘗試。

 import React from 'react' import { compose, withProps, lifecycle } from 'recompose' import {withScriptjs, withGoogleMap, GoogleMap, DirectionsRenderer} from 'react-google-maps' const { StandaloneSearchBox } = require("react-google-maps/lib/components/places/StandaloneSearchBox"); const DirectionsComponent = compose( withProps({ googleMapURL: "https://maps.googleapis.com/maps/api/js?key='yourkey'&libraries=geometry,drawing,places", loadingElement: <div style={{ height: `400px` }} />, containerElement: <div style={{ width: `100%` }} />, mapElement: <div style={{height: `600px`, width: `600px` }} />, }), withScriptjs, withGoogleMap, lifecycle({ componentWillMount() { const refs = {}; this.setState({ places: [], onSearchBoxMounted: ref => { refs.searchBox = ref; }, onPlacesChanged: () => { const places = refs.searchBox.getPlaces(); console.log(places) this.setState({ places }); } }); }, componentDidMount() { const google = window.google const DirectionsService = new google.maps.DirectionsService(); DirectionsService.route({ origin: new google.maps.LatLng(41.3851, -2.1734), destination: new google.maps.LatLng(40.4165, -3.70256), travelMode: google.maps.TravelMode.DRIVING, }, (result, status) => { console.log(result) if (status === google.maps.DirectionsStatus.OK) { this.setState({ directions: {...result}, markers: true }) const distance = result.routes[0].legs[0].distance['text'] console.log(distance) } else { console.error(`error fetching directions ${result}`); } }); } }) )(props => <div data-standalone-searchbox=""> <StandaloneSearchBox ref={props.onSearchBoxMounted} bounds={props.bounds} onPlacesChanged={props.onPlacesChanged} > <input type="text" placeholder="Enter your destination" style={{ boxSizing: `border-box`, border: `1px solid transparent`, width: `240px`, height: `32px`, padding: `0 12px`, borderRadius: `3px`, boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`, fontSize: `14px`, outline: `none`, textOverflow: `ellipses` }} /> </StandaloneSearchBox> <ol> {props.places.map( ({ place_id, formatted_address, geometry: { location } }) => ( <li key={place_id}> {formatted_address} {" at "} ({location.lat()}, {location.lng()}) </li> ) )} </ol> <GoogleMap defaultZoom={3}> {props.directions && <DirectionsRenderer directions={props.directions} suppressMarkers={props.markers} />} </GoogleMap> </div> ); class MyMapComponent extends React.PureComponent { constructor(props) { super(props) console.log(props) this.state = { } } render() { return ( <div> <DirectionsComponent/> </div> ) } } export default MyMapComponent

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

首先，請刪除您問題中的 API 密鑰，以后不要將其發布在公共站點以保護它。

我成功編寫了您的用例，但我使用了@react-google-maps/api ，因為這是對（遺憾的是未維護）react-google-maps 庫的完全重寫。 然后，我使用了在 map 實例加載時調用的OnLoad回調，而不是componentWillMount 。

請在此處查看工作示例代碼以及下面帶有內聯注釋的代碼片段：

索引.js

import React, { Component } from "react";
import { render } from "react-dom";
import { LoadScript } from "@react-google-maps/api";
import Map from "./Map";
import "./style.css";

const lib = ["places"];
const key = ""; // PUT GMAP API KEY HERE
class App extends React.Component {
  render() {
    return (
      <LoadScript googleMapsApiKey={key} libraries={lib}>
        <Map />
      </LoadScript>
    );
  }
}

render(<App />, document.getElementById("root"));

Map.js

/*global google*/
import ReactDOM from "react-dom";
import React from "react";

import {
  GoogleMap,
  StandaloneSearchBox,
  DirectionsRenderer
} from "@react-google-maps/api";

const defaultLocation = { lat: 40.756795, lng: -73.954298 };
let destination = { lat: 41.756795, lng: -78.954298 };
let origin = { lat: 40.756795, lng: -73.954298 };
let directionsService;
class Map extends React.Component {
  state = {
    directions: null,
    bounds: null
  };

  onMapLoad = map => {
    directionsService = new google.maps.DirectionsService();
    //load default origin and destination
    this.changeDirection(origin, destination);
  };

  //function that is called when SearchBox has loaded and assigned ref to this.searchbox  to get the searchbox object
  onSBLoad = ref => {
    this.searchBox = ref;
  };

  onPlacesChanged = () => {
    //pass the new place location as the origin
    this.changeDirection(
      this.searchBox.getPlaces()[0].geometry.location,
      destination
    );
  };

  //function that is calling the directions service
  changeDirection = (origin, destination) => {
    directionsService.route(
      {
        origin: origin,
        destination: destination,
        travelMode: google.maps.TravelMode.DRIVING
      },
      (result, status) => {
        if (status === google.maps.DirectionsStatus.OK) {
          //changing the state of directions to the result of direction service
          this.setState({
            directions: result
          });
        } else {
          console.error(`error fetching directions ${result}`);
        }
      }
    );
  };

  render() {
    return (
      <div>
        <div id="searchbox">
          <StandaloneSearchBox
            onLoad={this.onSBLoad}
            onPlacesChanged={this.onPlacesChanged}
          >
            <input
              type="text"
              placeholder="Customized your placeholder"
              style={{
                boxSizing: `border-box`,
                border: `1px solid transparent`,
                width: `240px`,
                height: `32px`,
                padding: `0 12px`,
                borderRadius: `3px`,
                boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
                fontSize: `14px`,
                outline: `none`,
                textOverflow: `ellipses`,
                position: "absolute",
                left: "50%",
                marginLeft: "-120px"
              }}
            />
          </StandaloneSearchBox>
        </div>
        <br />
        <div>
          <GoogleMap
            center={defaultLocation}
            zoom={5}
            onLoad={map => this.onMapLoad(map)}
            mapContainerStyle={{ height: "400px", width: "800px" }}
          >
            {this.state.directions !== null && (
              <DirectionsRenderer directions={this.state.directions} />
            )}
          </GoogleMap>
        </div>
      </div>
    );
  }
}

export default Map;