карта ПВЗ

components/PvzMap.vue

@@ -0,0 +1,59 @@
+<template>
+  <div ref="mapContainer" class="w-full" style="height: calc(100dvh - 54px)" />
+  {{ coords }}
+  {{ locatedAt }}
+</template>
+
+<script setup lang="ts">
+import { useGeolocation } from '@vueuse/core'
+import { onMounted, ref } from 'vue'
+
+const props = defineProps<{
+  pickupPoints: {
+    id: string
+    address: string
+    location: { lat: number, lon: number }
+  }[]
+}>()
+
+const { coords, locatedAt } = useGeolocation()
+
+const token = '13f4c06b-cb7e-4eeb-81f1-af52f12587b2'
+
+const mapContainer = ref<HTMLDivElement | null>(null)
+
+const loadYandexMap = async () => {
+  if (!window.ymaps) {
+    await new Promise<void>((resolve) => {
+      const script = document.createElement('script')
+      script.src = `https://api-maps.yandex.ru/2.1/?apikey=${token}&lang=ru_RU`
+      script.onload = () => resolve()
+      document.head.appendChild(script)
+    })
+  }
+
+  window.ymaps.ready(() => {
+    const map = new window.ymaps.Map(mapContainer.value!, {
+      center: [coords.value.latitude, coords.value.longitude],
+      zoom: 10,
+      controls: ['zoomControl'],
+    })
+
+    props?.pickupPoints?.forEach((point) => {
+      const placemark = new window.ymaps.Placemark(
+        [point?.position?.latitude, point?.position?.longitude],
+        {
+          balloonContent: `<strong>${point?.position?.longitude}</strong>\n<strong>${point?.position?.latitude}</strong>`,
+          hintContent: point?.position?.longitude,
+        },
+        { preset: 'islands#redIcon' },
+      )
+      map.geoObjects.add(placemark)
+    })
+  })
+}
+
+onMounted(async () => {
+  await loadYandexMap()
+})
+</script>

package.json

@@ -33,6 +33,7 @@
   "devDependencies": {
     "@antfu/eslint-config": "^4.13.2",
     "@nuxt/devtools": "latest",
+    "@yandex/ymaps3-types": "^1.0.17734864",
     "eslint": "^9.27.0",
     "eslint-plugin-format": "^1.0.1",
     "sass": "^1.71.0",

pages/index.vue

@@ -7,7 +7,7 @@
         class="card"
         @click="router.push(`/product/${product.id}`)"
       >
-        <img class="card__image" :src="product?.images[0]?.src" alt="card?.image">
+        <img class="card__image" :src="product?.images?.[0]?.src" alt="card?.image">
 
         <div class="card__description">
           <div>{{ product?.name }}</div>

pages/order/delivery.vue

@@ -1,8 +1,16 @@
 <template>
+  <div>
+    <PvzMap :pickup-points="pickupPoints" />
+  </div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
+import { ref } from 'vue'
+import PvzMap from '~/components/PvzMap.vue'
 
+const pickupPoints = ref([])
+
+const { data } = useFetch('/api/yandex')
+pickupPoints.value = data.value?.points
+console.log(pickupPoints?.value)
 </script>
-
-<style lang="scss"></style>

server/api/yandex.ts

@@ -0,0 +1,31 @@
+import axios from 'axios'
+import { defineEventHandler } from 'h3'
+
+export default defineEventHandler(async () => {
+  const token = 'y2_AgAAAAD04omrAAAPeAAAAAACRpC94Qk6Z5rUTgOcTgYFECJllXYKFx8'
+
+  try {
+    const response = await axios.post(
+      'https://b2b.taxi.tst.yandex.net/api/b2b/platform/pickup-points/list',
+      {
+        filters: {
+          region_ids: [213],
+        },
+        limit: 5,
+      },
+      {
+        headers: {
+          'Content-Type': 'application/json',
+          'Accept-Language': 'ru-RU',
+          'Authorization': `Bearer ${token}`,
+        },
+      },
+    )
+
+    return response.data
+  }
+  catch (error) {
+    console.error('Ошибка при запросе к Яндекс API:', error)
+    return { error: 'Не удалось получить точки ПВЗ' }
+  }
+})

tsconfig.json

@@ -1,4 +1,23 @@
 {
   // https://nuxt.com/docs/guide/concepts/typescript
-  "extends": "./.nuxt/tsconfig.json"
+  "extends": "./.nuxt/tsconfig.json",
+  "compilerOptions": {
+    "target": "es2015",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "typeRoots": [
+      "./node_modules/@types",
+      "./node_modules/@yandex/ymaps3-types"
+    ],
+    "paths": {
+      "ymaps3": [
+        "./node_modules/@yandex/ymaps3-types"
+      ]
+    }
+  }
 }