карты пвз

components/PvzMap.vue

@@ -24,7 +24,7 @@
         :key="pickupPoint.id"
         position="top-center left-center"
         :settings="{ coordinates: [pickupPoint.position.longitude, pickupPoint.position.latitude] }"
-        @click="centerMap(pickupPoint)"
+        @click="$emit('update:modelValue', pickupPoint)"
       >
         <div class="marker">
           <Icon name="i-lucide-map-pin" class="marker__icon" />
@@ -54,11 +54,13 @@ import {
   YandexMapDefaultSchemeLayer,
   YandexMapMarker,
 } from 'vue-yandex-maps'
-import { useCheckout } from '~/composables/useCheckout'
 
-defineProps<{ pickupPoints: PickupPoint[] }>()
+const props = defineProps<{ modelValue: PickupPoint, pickupPoints: PickupPoint[] }>()
+
+defineEmits<{
+  (e: 'update:modelValue', value: PickupPoint | undefined): void
+}>()
 
-const { setCheckoutPickupPoint, isPickupPointSelected } = useCheckout()
 const { coords } = useGeolocation()
 const clusterer = shallowRef<YMapClusterer | null>(null)
 const trueBounds = ref<LngLatBounds>([[0, 0], [0, 0]])
@@ -70,17 +72,6 @@ const location = ref<YMapLocationRequest>({
   zoom: 2,
 })
 
-function centerMap(pickupPoint: PickupPoint) {
-  location.value = {
-    center: [pickupPoint.position.longitude, pickupPoint.position.latitude],
-    zoom: 18,
-    duration: 500,
-  }
-
-  setCheckoutPickupPoint(pickupPoint)
-  isPickupPointSelected.value = true
-}
-
 watch(coords, (newCoords) => {
   if (newCoords && hasCoords.value) {
     location.value = {
@@ -91,7 +82,13 @@ watch(coords, (newCoords) => {
   }
 }, { once: true })
 
-defineExpose({ centerMap, location })
+watch(() => props.modelValue, (newPickupPoint) => {
+  location.value = {
+    center: [newPickupPoint.position.longitude, newPickupPoint.position.latitude],
+    zoom: 18,
+    duration: 500,
+  }
+})
 </script>
 
 <style lang="scss" scoped>