._.

src/geocoder.jsx

@@ -0,0 +1,25 @@
+import axios from "axios";
+
+const API_KEY = "d101001e-49f5-4a17-ac39-2d67f64b3f9b";
+
+export const getCoordinates = async (city) => {
+  try {
+    const response = await axios.get(
+      `https://geocode-maps.yandex.ru/1.x/?apikey=${API_KEY}&geocode=${city}&format=json`
+    );
+
+    const coordinates =
+      response.data?.response?.GeoObjectCollection?.featureMember[0]?.GeoObject
+        ?.Point?.pos;
+
+    if (coordinates) {
+      const [longitude, latitude] = coordinates.split(" ");
+      return { longitude, latitude };
+    }
+
+    throw new Error("Координаты не найдены");
+  } catch (error) {
+    console.error("Ошибка при получении координат:", error);
+    throw error;
+  }
+};

src/pages/DeliveryOrderDetails.jsx

@@ -1,11 +1,13 @@
 import React, { useState, useEffect } from "react";
 import { getDeliveryAccessories } from "../api.jsx";
 import { useParams } from "react-router-dom";
+import { getCoordinates } from "../geocoder.jsx";
 
 const DeliveryOrderDetails = () => {
   const { id: deliveryOrderId } = useParams();
   const [deliveryAccessories, setDeliveryAccessories] = useState([]);
   const [loading, setLoading] = useState(true);
+  const [coordinates, setCoordinates] = useState([]);
 
   useEffect(() => {
     fetchDeliveryAccessories();
@@ -13,9 +15,16 @@ const DeliveryOrderDetails = () => {
 
   const fetchDeliveryAccessories = async () => {
     try {
-      console.log(deliveryOrderId);
       const accessories = await getDeliveryAccessories(deliveryOrderId);
       setDeliveryAccessories(accessories);
+
+      const coords = await Promise.all(
+        accessories.map(async (accessory) => {
+          const coords = await getCoordinates(accessory.city_name);
+          return { city: accessory.city_name, ...coords };
+        })
+      );
+      setCoordinates(coords);
     } catch (error) {
       console.error("Ошибка при загрузке доставок:", error);
     } finally {
@@ -31,11 +40,19 @@ const DeliveryOrderDetails = () => {
         </div>
       ) : (
         <ul>
-          {deliveryAccessories.map((accessory) => (
+          {deliveryAccessories.map((accessory) => {
+            const coord = coordinates.find(
+              (c) => c.city === accessory.city_name
+            );
+            return (
               <li key={accessory.id}>
-              Доставка: {accessory.name} (Город: {accessory.city_name})
+                Доставка: {accessory.name} (Город: {accessory.city_name},
+                Координаты:{" "}
+                {coord ? `${coord.latitude}, ${coord.longitude}` : "Не найдены"}
+                )
               </li>
-          ))}
+            );
+          })}
         </ul>
       )}
     </div>