如何解决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
}}
/>
)}
回调响应为
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。