карты пвз

components/PvzMap.vue

@@ -6,13 +6,8 @@
   <YandexMap
     v-else
     v-model="map"
-    :settings="{
-      location: {
-        center: [coords?.longitude, coords?.latitude],
-        zoom: 9,
-      },
-    }"
     class="w-full"
+    :settings="{ location }"
     style="height: calc(100dvh - 54px)"
   >
     <YandexMapDefaultSchemeLayer />
@@ -29,6 +24,7 @@
         :key="marker.id"
         position="top-center left-center"
         :settings="{ coordinates: [marker.position.longitude, marker.position.latitude] }"
+        @click="centerMap([marker.position.longitude, marker.position.latitude])"
       >
         <div class="marker">
           <Icon name="i-lucide-map-pin" class="marker__icon" />
@@ -45,7 +41,8 @@
 </template>
 
 <script setup lang="ts">
-import type { LngLatBounds, YMap } from '@yandex/ymaps3-types'
+import type { LngLat, LngLatBounds, YMap } from '@yandex/ymaps3-types'
+import type { YMapLocationRequest } from '@yandex/ymaps3-types/imperative/YMap'
 import type { YMapClusterer } from '@yandex/ymaps3-types/packages/clusterer'
 import { useGeolocation } from '@vueuse/core'
 import { computed, shallowRef } from 'vue'
@@ -57,7 +54,7 @@ import {
   YandexMapMarker,
 } from 'vue-yandex-maps'
 
-const props = defineProps<{
+defineProps<{
   pickupPoints: {
     id: string
     address: string
@@ -66,13 +63,35 @@ const props = defineProps<{
 }>()
 
 const { coords } = useGeolocation()
+const clusterer = shallowRef<YMapClusterer | null>(null)
+const trueBounds = ref<LngLatBounds>([[0, 0], [0, 0]])
+const map = shallowRef<null | YMap>(null)
 
 const hasCoords = computed(() => coords.value?.latitude !== Infinity && coords.value?.longitude !== Infinity)
 
-const map = shallowRef<null | YMap>(null)
+const location = ref<YMapLocationRequest>({
+  zoom: 2,
+})
 
-const clusterer = shallowRef<YMapClusterer | null>(null)
-const trueBounds = ref<LngLatBounds>([[0, 0], [0, 0]])
+function centerMap(coordinates: LngLat) {
+  location.value = {
+    center: coordinates,
+    zoom: 18,
+    duration: 2500,
+  }
+}
+
+watch(coords, (newCoords) => {
+  if (newCoords && hasCoords.value) {
+    location.value = {
+      center: [newCoords.longitude, newCoords.latitude],
+      zoom: 9,
+      duration: 2500,
+    }
+  }
+}, { once: true })
+
+defineExpose({ centerMap, location })
 </script>
 
 <style lang="scss" scoped>