<script setup>
    import { ref } from 'vue'
    import { getCars } from '../api'
    import { 
        YandexMapMarker, 
        YandexMapDefaultFeaturesLayer 
    } from 'vue-yandex-maps'
    import { YandexMap, YandexMapDefaultSchemeLayer } from 'vue-yandex-maps'
    const map = ref(null);

    let cars = ref([])
    getCars().then(response => {
        cars.value = response.data
    })
    console.log(cars)

</script>



<template>
  <yandex-map
      v-model="map"
      :settings="{
        location: {
          center: [47.893739, 56.639053],
          zoom: 15,
        },
      }"
      width="100%"
      height="100%">
      <yandex-map-default-scheme-layer/>
      <yandex-map-default-features-layer/>
        <yandex-map-marker
            v-for="(car, index) in cars"
            :key="index"
            position="top-center left-center"
            :settings="{ coordinates: [car.lon, car.lat] }"
        >
            <img
                src="/src/assets/car.png"
                width="48px" height="48px"
                @click="$emit('car-clicked', car)"
            />
        </yandex-map-marker>
    </yandex-map>
    
</template>
