карта ПВЗ

components/PvzMap.vue

@@ -1,28 +1,28 @@
 <template>
   <div ref="mapContainer" class="w-full" style="height: calc(100dvh - 54px)" />
-  {{ coords }}
+  <div v-if="!coordsReady" class="p-4 text-center">
-  {{ locatedAt }}
+    ⏳ Определяем ваше местоположение...
+  </div>
 </template>
 
 <script setup lang="ts">
 import { useGeolocation } from '@vueuse/core'
-import { onMounted, ref } from 'vue'
+import { ref, watch } from 'vue'
 
 const props = defineProps<{
   pickupPoints: {
     id: string
     address: string
-    location: { lat: number, lon: number }
+    position: { latitude: number, longitude: number }
   }[]
 }>()
 
-const { coords, locatedAt } = useGeolocation()
-
 const token = '13f4c06b-cb7e-4eeb-81f1-af52f12587b2'
-
 const mapContainer = ref<HTMLDivElement | null>(null)
+const { coords } = useGeolocation()
+const coordsReady = ref(false)
 
-const loadYandexMap = async () => {
+const initMap = async (lat: number, lon: number) => {
   if (!window.ymaps) {
     await new Promise<void>((resolve) => {
       const script = document.createElement('script')
@@ -34,17 +34,17 @@ const loadYandexMap = async () => {
 
   window.ymaps.ready(() => {
     const map = new window.ymaps.Map(mapContainer.value!, {
-      center: [coords.value.latitude, coords.value.longitude],
+      center: [lat, lon],
       zoom: 10,
       controls: ['zoomControl'],
     })
 
-    props?.pickupPoints?.forEach((point) => {
+    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>`,
+          balloonContent: `<strong>${Object.values(point?.position)}</strong>`,
-          hintContent: point?.position?.longitude,
+          hintContent: Object.values(point?.position),
         },
         { preset: 'islands#redIcon' },
       )
@@ -53,7 +53,14 @@ const loadYandexMap = async () => {
   })
 }
 
-onMounted(async () => {
+watch(
-  await loadYandexMap()
+  () => coords.value,
-})
+  async (val) => {
+    if (val.latitude && val.longitude && !coordsReady.value) {
+      coordsReady.value = true
+      await initMap(val.latitude, val.longitude)
+    }
+  },
+  { deep: true },
+)
 </script>