我有一個組件，可以使用 Google Maps (DirectionsRenderer) 獲取從一個點到另一個點的距離。
我想要的是在 h1 中使用這些資料
directionsRenderer.directions.routes[0].legs[0].distance.text;
這是我的回報
return (
<>
<div>
<GoogleMap
mapContainerStyle={mapContainerStyle}
zoom={8}
center={center}
onLoad={onMapLoad}
>
{response !== null && (
<DirectionsRenderer
options={{
directions: response,
}}
onLoad={(directionsRenderer) => {
distanceInKm =
directionsRenderer.directions.routes[0].legs[0].distance.text;
console.log("I wan't this data ->" distanceInKm);
}}
/>
)}
<DirectionsService
options={DirectionsServiceOption}
callback={directionsCallback}
/>
</GoogleMap>
</div>
{/* THIS IS WHERE I WANT TO USE THE DATA */}
<h1 id="calculatedDistance">{distanceInKm} km v?k</h1>
</>
);
};
編輯：
ShowProduct.js（這是我獲得距離的地方）
import React, {
useContext,
useEffect,
useState,
useCallback,
useRef,
} from "react";
import { Link } from "react-router-dom";
import {
GoogleMap,
useLoadScript,
DirectionsService,
DirectionsRenderer,
} from "@react-google-maps/api";
// context
import DbContext from "../../../context/DbContext";
// MAP
const libraries = ["places", "directions"];
const mapContainerStyle = {
width: "100%",
height: "50vh",
};
const ShowProduct = (props) => {
const [post, setPost] = useState();
let [distanceInKm, setDistanceInKm] = useState(0);
const context = useContext(DbContext);
useEffect(() => {
context.getProduct(props.match.params.id).then((x) => setPost(x));
}, [context.existsUser()]);
useEffect(() => {
context.getProduct(props.match.params.id).then((x) => setPost(x));
}, []);
// map
const { isLoaded, loadError } = useLoadScript({
googleMapsApiKey: "AIzaSyCyPIhX_arhU0X62fGNLaMFassfUOmfal8",
libraries,
});
const [currentPosition, setCurrentPosition] = useState({});
// destination will come from Database
let [destination2, setDestination2] = useState(
"57.021779738464396, 9.711555234340288"
);
const success = (position) => {
let currentPosition = {
lat: position.coords.latitude,
lng: position.coords.longitude,
};
setCurrentPosition(currentPosition);
};
let [origin2, setOrigin2] = useState();
useEffect(() => {
navigator.geolocation.getCurrentPosition(success);
}, []);
const [response, setResponse] = useState(null);
const directionsCallback = (response) => {
console.log(response);
if (response !== null) {
if (response.status === "OK") {
setResponse(response);
} else {
console.log("response: ", response);
}
}
};
const mapRef = useRef();
const onMapLoad = useCallback((map) => {
mapRef.current = map;
}, []);
if (loadError) return "Error loading maps";
if (!isLoaded) return "loading maps";
destination2 = post?.latitude ", " post?.longitude;
const DirectionsServiceOption = {
destination: destination2,
origin: currentPosition.lat ", " currentPosition.lng,
travelMode: "DRIVING",
};
return (
<>
<div>
<GoogleMap
mapContainerStyle={mapContainerStyle}
zoom={8}
center={center}
onLoad={onMapLoad}
>
{response !== null && (
<DirectionsRenderer
options={{
directions: response,
}}
onLoad={(directionsRenderer) => {
distanceInKm = directionsRenderer.directions
.routes[0].legs[0].distance.text;
setDistanceInKm(distanceInKm);
}}
/>
)}
<DirectionsService
options={DirectionsServiceOption}
callback={directionsCallback}
/>
</GoogleMap>
</div>
<h1 id="calculatedDistance">{distanceInKm} km v?k</h1>
</>
);
};
const styleLikeButton = {
right: 23,
bottom: 10,
};
export default ShowProduct;
ProductCard.js（這是要使用它的地方）
import React, {
useContext,
useEffect,
useState,
useRef,
useCallback,
} from "react";
import ProductCard from "react-tinder-card";
import database from "../../../firebase";
import "../../../styles/ProductCards.css";
import { Link } from "react-router-dom";
// Context
import DbContext from "../../../context/DbContext";
const ProductCards = () => {
const [products, setProducts] = useState([]);
const context = useContext(DbContext);
useEffect(() => {
if (context.existsUser() == null) {
window.location.href = "/login";
}
context.getProducts().then((r) => setProducts(r));
console.log(products);
}, [context]);
// TJEK swipe direction
const onSwipe = (direction) => {
if (direction == "right") {
// product to interestsList
console.log("Interesseret!!!");
}
console.log("You swiped: " direction);
};
const onCardLeftScreen = (myIdentifier) => {
console.log(myIdentifier " left the screen");
};
return (
<>
<div>
{products.length > 0 ? (
<div className="productCards__cardContainer">
{products.map((product) => (
<ProductCard
className="swipe"
key={product.title}
preventSwipe={["down"]}
onSwipe={onSwipe}
onCardLeftScreen={() => onCardLeftScreen(product.id)}
>
{/* THIS IS WHERE I WOULD LIKE TO USE THE DISTANCE */}
<h1>{distanceInKm} km v?k</h1>
<h4 className="price">{product?.price} kr.</h4>
<Link
className="product_title"
to={`/showproduct/${product.id}`}
>
{product.title}
</Link>
</ProductCard>
))}
</div>
) : (
"Loading..."
)}
</div>
</>
);
};
export default ProductCards;
uj5u.com熱心網友回復：
在回傳之前，您需要使用 useState 鉤子設定一個狀態：
const [distanceInKm, setDistanceInKm] = useState(0);
然后在您的 onl oad 回呼中，您需要設定距離的實際值：
onLoad={(directionsRenderer) => {
distanceInKm = directionsRenderer.directions
.routes[0].legs[0].distance.text;
setDistanceInKm(distanceInKm);
}}
最后在您的 h1 中，您現在可以使用該值：
<h1 id="calculatedDistance">{distanceInKm} km v?k</h1>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/379600.html