react-google-maps / api DirectionsService不断重新呈现自身

问题描述

我已经在react JS中编写了此代码，以使用“ react-google-maps / api”计算两点之间的路线。现在，我的Google地图不断重新呈现自身，直到给出“ DIRECTIONS_ROUTE：OVER_QUERY_LIMIT”错误。我不知道是什么问题。感谢您的帮助，因为我是React和google-API的初学者，并且我在React中还没有找到很多有关Google Api的指南。

这是我的代码：

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

const libraries = ["places","directions"];
const mapContainerStyle = {
  width: "100%",height: "50vh",};
const center = {
  lat: 31.582045,lng: 74.329376,};
const options = {};

const MainMaps = () => {
  const { isLoaded,loadError } = useLoadScript({
    googleMapsApiKey: "********",libraries,});

  const [origin2,setorigin2] = React.useState("lahore");
  const [destination2,setDestination2] = React.useState("gujranwala");
  const [response,setResponse] = React.useState(null);

  const directionsCallback = (response) => {
    console.log(response);

    if (response !== null) {
      if (response.status === "OK") {
        setResponse(response);
      } else {
        console.log("response: ",response);
      }
    }
  };

  const mapRef = React.useRef();
  const onMapLoad = React.useCallback((map) => {
    mapRef.current = map;
  },[]);
  if (loadError) return "Error loading maps";
  if (!isLoaded) return "loading maps";

  const DirectionsServiceOption = {
    destination: destination2,origin: origin2,travelMode: "DRIVING",};

  return (
    <div>
      <GoogleMap
        mapContainerStyle={mapContainerStyle}
        zoom={8}
        center={center}
        onLoad={onMapLoad}
      >
        {response !== null && (
          <DirectionsRenderer
            options={{
              directions: response,}}
          />
        )}

        <DirectionsService
          options={DirectionsServiceOption}
          callback={directionsCallback}
        />
      </GoogleMap>
    </div>
  );
};

export default MainMaps;

解决方法

渲染问题似乎与库本身有关。我建议的一种替代方法是改为使用/加载Google Maps API脚本，而不是依赖于第三方库。这样，您只需遵循Google提供的official documentation。

通过加载脚本，我们现在可以遵循其Directions API documentation：

以下是示例应用供您参考：https://stackblitz.com/edit/react-directions-64165413

App.js

    import React,{ Component } from 'react';
    import { render } from 'react-dom';
    import Map from './components/map';
    import "./style.css";
    
    class App extends Component {
     
      render() {
        return (
           <Map 
            id="myMap"
            options={{
              center: { lat: 31.582045,lng: 74.329376 },zoom: 8
            }}
          />
        );
      }
    }
    
    export default App;

map.js

    import React,{ Component } from "react";
    import { render } from "react-dom";
    
    class Map extends Component {
      constructor(props) {
        super(props);
        this.state = {
          map: "",origin: "",destination: ""
        };
        this.handleInputChange = this.handleInputChange.bind(this); 
        this.onSubmit = this.onSubmit.bind(this);
      }
    
      onScriptLoad() {
        this.state.map = new window.google.maps.Map(
          document.getElementById(this.props.id),this.props.options
        );
      }
    
      componentDidMount() {
        if (!window.google) {
          var s = document.createElement("script");
          s.type = "text/javascript";
          s.src = `https://maps.google.com/maps/api/js?key=YOUR_API_KEY`;
          var x = document.getElementsByTagName("script")[0];
          x.parentNode.insertBefore(s,x);
          // Below is important.
          //We cannot access google.maps until it's finished loading
          s.addEventListener("load",e => {
            this.onScriptLoad();
          });
        } else {
          this.onScriptLoad();
        }
      }
    
      onSubmit(event) {    
        this.calculateAndDisplayRoute();
        event.preventDefault();
      }
    
      calculateAndDisplayRoute() {
        var directionsService = new google.maps.DirectionsService();
        var directionsRenderer = new google.maps.DirectionsRenderer();
        directionsRenderer.setMap(this.state.map);
        directionsService.route(
          {
            origin: { query: this.state.origin },destination: { query: this.state.destination },travelMode: "DRIVING"
          },function(response,status) {
            if (status === "OK") {
              directionsRenderer.setDirections(response);
            } else {
              window.alert("Directions request failed due to " + status);
            }
          }
        );
        
      }
    
      handleInputChange(event) {
        const target = event.target;
        const value = target.type === "checkbox" ? target.checked : target.value;
        const name = target.name;
    
        this.setState({
          [name]: value
        });
      }
      addMarker(latLng) {
        var marker = new window.google.maps.Marker({
          position: { lat: -33.8569,lng: 151.2152 },map: this.state.map,title: "Hello Sydney!"
        });
        var marker = new google.maps.Marker({
          position: latLng,map: this.state.map
        });
      }
    
      render() {
        return (
          <div>
            <input
              id="origin"
              name="origin"
              value={this.state.origin}
              placeholder="Origin"
              onChange={this.handleInputChange}
            />
            <input
              id="destination"
              name="destination"
              value={this.state.destination}
              placeholder="Destination"
              onChange={this.handleInputChange}
            />
            <button id="submit" onClick={this.onSubmit}>
              Search
            </button>
            <div className="map" id={this.props.id} />
          </div>
        );
      }
    }
    
    export default Map;

,

render 应该始终保持纯净。在渲染过程中做副作用是一种非常糟糕的做法。

您在 directionCallback 中不断调用 setstate。您只需要添加另一个条件 count.current

const [origin,setOrigin] = React.useState('chennai');
  const [destination,setDestination] = React.useState('bangalore');
  const [response,setResponse] = React.useState(null);
let count = React.useRef(0);
  const directionsCallback = res => {
    if (res !== null && && count.current < 2) {
      if (res.status === 'OK') {
        count.current += 1;
        setResponse(res);
      } else {
        count.current = 0;
        console.log('res: ',res);
      }
    }
  };

  <DirectionsService
            options={{
              destination: destination,origin: origin,travelMode: 'DRIVING'
            }}
            callback={directionsCallback}
          />

但回调的响应未在 DirectionsRenderer 中呈现。

我也没有收到任何错误消息。

{response !== null && (
            <DirectionsRenderer
              // required
              options={{
                directions: response
              }}
            />
          )}

回调响应为