react-google-maps/api DirectionsService 不断重新渲染自身

问题描述 投票：0回答：6

我用react JS编写了这段代码，使用“react-google-maps/api”来计算两点之间的路线。现在我的谷歌地图不断重新渲染自身，直到出现“DIRECTIONS_ROUTE：OVER_QUERY_LIMIT”错误。我不知道出了什么问题。帮助将不胜感激，因为我是反应和谷歌API的初学者，而且我还没有在反应中找到很多谷歌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;
reactjs google-maps google-api google-directions-api react-google-maps
6个回答
3
投票

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

你在directionCallback中连续调用setstate。您只需要添加另一个条件 count.current < 2.

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
              }}
            />
          )}

回调响应为

2
投票

有点晚了，但遇到同样问题的人可以参考这里。 DirectionService 将一次又一次地重新渲染，您必须停止它，直到从 DirectionService 回调函数获取 DirectionRender 位置（纬度和经度）的响应结果。您可以在开始时设置一个 null 变量，并应用 DirectionService 运行的条件，直到该变量为 null。在 DirectionService 的回调中，将此变量设置为从此回调收到的响应，然后就可以了。 我在 DirectionRender 类中遇到了另一个问题，一旦我更新状态，它就会一次又一次地重新渲染。在选项中，将preserveViewport设置为true以保留视图。

关于DirectionService问题，您可以参考这里： https://react-google-maps-api-docs.netlify.app/#directionsrenderer

1
投票

渲染问题似乎与库本身有关。我建议的一种替代方案是使用/加载 Google Maps API 脚本，而不是依赖第 3 方库。这样，您就可以按照Google提供的官方文档进行操作。

通过加载脚本，我们现在可以按照他们的 Directions API 文档:

这里有一个示例应用程序供您参考：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;
1
投票

如果有人仍然为此苦苦挣扎，我已经精心设计了一个解决方案。我将其发布在这里，也许会对某人有所帮助。

import * as React from "react";

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

interface MapComputationProps {
    directionsSetter: Function;
    distanceSetter: Function;
    origin: string;
    destination: string;
    googleMapUrl: string;
}

const containerStyle = {
    width: "100%",
    height: "100%",
};

const center = {
    lat: 0,
    lng: 0,
};

const MapComponent: any = (props: MapComputationProps) => {
    const [directionsState, setDirectionsState] =
        React.useState<google.maps.DirectionsResult | null>(null);

    const {
        directionsSetter,
        distanceSetter,
        origin,
        destination,
        googleMapUrl,
    } = props;

    const { isLoaded } = useJsApiLoader({
        googleMapsApiKey: googleMapUrl,
    });

    React.useEffect(() => {
        if (!window.google) {

            return;
        }

        const DirectionsService = new google.maps.DirectionsService();
        const MatrixService = new google.maps.DistanceMatrixService();

        DirectionsService.route(
            {
                origin,
                destination,
                travelMode: google.maps.TravelMode.DRIVING,
                unitSystem: google.maps.UnitSystem.METRIC,
            },
            (result, status) => {
                if (status === google.maps.DirectionsStatus.OK) {
                    setDirectionsState(result);
                    directionsSetter(result);
                } else {
                    console.error(`error fetching directions ${result}`);
                }
            }
        );

        MatrixService.getDistanceMatrix(
            {
                origins: [origin],
                destinations: [destination],
                travelMode: google.maps.TravelMode.DRIVING,
                unitSystem: google.maps.UnitSystem.METRIC,
            },
            (result, status) => {
                if (status === google.maps.DistanceMatrixStatus.OK) {
                    distanceSetter(result);
                }
            }
        );
    }, [origin, destination]);

    if (!isLoaded) {
        return "Loading...";
    }

    return (
        <GoogleMap mapContainerStyle={containerStyle} center={center} zoom={1}>
            {directionsState && (
                <DirectionsRenderer options={{ directions: directionsState }} />
            )}
        </GoogleMap>
    );
};

export default MapComponent;
0
投票

这是渲染方向的组件

从 'react' 导入 React, { useState};从 '@react-google-maps/api' 导入 { DirectionsRenderer, DirectionsService };

function DirectionsMap(props) {

  const { origin, destination } = props;
  const [response, setResponse] = useState(null);



  const directionsCallback = (googleResponse) => {
    if (googleResponse) {
      if(response) {
        if (googleResponse.status === 'OK' && googleResponse.routes.overview_polyline !== response.routes.overview_polyline) {
          setResponse(() => googleResponse)
        } else {
          console.log('response: ', googleResponse)
        }
      } else {
        if (googleResponse.status === 'OK') {
          setResponse(() => googleResponse)
        } else {
          console.log('response: ', googleResponse)
        }
      }
    }    }

  return (
    <div>
        <>
          {destination !== '' && origin !== '' && (
            <DirectionsService 
              options={{
                origin,
                destination,
                travelMode: 'DRIVING'
              }}
              callback={directionsCallback}
            />
          )}

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


export default DirectionsMap;

这就是我们需要调用组件的方式

<GoogleMap
            mapContainerStyle={{
              width: 'Auto',
              height: '400px'
            }}
            onClick={setCoordinate}
            center={center}
            zoom={10}
          >
            <DirectionsMap
              origin={origin}
              destination={destination}
            />,
</GoogleMap>

别忘了调用useJsApiLoader也记得添加

图书馆：地方

  const { isLoaded } = useJsApiLoader({
id: 'google-map-script',
googleMapsApiKey: `${import.meta.env.VITE_GOOGLE_MAP_API}`,
libraries: places

}）

-1
投票

嘿，我来晚了一点，但你正在立即调用正在重新渲染并搞乱的回调函数。只需更改以下内容即可。

callback={direactionsCallback}

这样：

callback={(e) => directionsCallback(e)}

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.