app_vue2/components/Ui/Map.vue

<template>
  <div id="map-wrap">
    <client-only>
      <l-map :zoom=zoom :center="center">
        <l-tile-layer :url="layerUrl"></l-tile-layer>
        <l-marker
          :lat-lng="latLong"
          draggable
          v-on:update:latLng="onMoveMarker"></l-marker>
      </l-map>

      <v-btn class="mr-4 ot_green ot_white--text" @click="updateMap">
        {{ $t('updateMap') }}
      </v-btn>

    </client-only>
  </div>
</template>

<script lang="ts">
  import {defineComponent, computed,ref, toRefs, useContext, ComputedRef, Ref} from '@nuxtjs/composition-api'
  import {QUERY_TYPE, TYPE_ALERT} from "~/types/enums";
  import {AddressPostal} from "~/models/Core/AddressPostal";
  import {AnyJson} from "~/types/interfaces";
  import {alert} from "~/types/interfaces";
  import {ToRefs} from "@vue/composition-api";

  export default defineComponent({
    props:{
      address:{
        type: Object as () => AddressPostal,
        required: true
      },
      zoom:{
        type: Number,
        required: true
      }
    },
    setup(props, {emit}){
      const {$dataProvider, store} = useContext()
      const {address}:ToRefs = toRefs(props)
      const latitude:Ref<number> = ref(address.value.latitude)
      const longitude:Ref<number> = ref(address.value.longitude)

      const center:ComputedRef<Array<number>> = computed(() => [latitude.value,longitude.value])
      const latLong:ComputedRef<Array<number>> = computed(() => [latitude.value,longitude.value])
      const layerUrl:string = 'https://{s}.tile.osm.org/{z}/{x}/{y}.png'

      const updateMap = async () => {
        let response = await $dataProvider.invoke({
          type: QUERY_TYPE.DEFAULT,
          url: `gps-coordinate-searching?street=${address.value.streetAddress} ${address.value.streetAddressSecond} ${address.value.streetAddressThird}&cp=${address.value.postalCode}&city=${address.value.addressCity}`
        })
        if(response.length > 0){
          latitude.value = response[0].latitude
          longitude.value = response[0].longitude

          address.value.latitude = response[0].latitude
          address.value.longitude = response[0].longitude
          emit('updateAddress', address.value)
        }else{
          const alert:alert = {
            type: TYPE_ALERT.ALERT,
            message: 'no_coordinate_corresponding'
          }
          store.commit('page/setAlert', alert)
        }
      }

      const onMoveMarker = async (event:AnyJson) => {
        let response = await $dataProvider.invoke({
          type: QUERY_TYPE.DEFAULT,
          url: `gps-coordinate-reverse/${event.lat}/${event.lng}`
        })
        address.value.streetAddress = response.streetAddress
        address.value.streetAddressSecond = response.streetAddressSecond
        address.value.streetAddressThird = response.streetAddressThird
        address.value.postalCode = response.cp
        address.value.addressCity = response.city

        emit('updateAddress', address.value)
      }

      return {
        updateMap,
        center,
        latLong,
        layerUrl,
        onMoveMarker
      }
    }
  })

</script>

<style scoped>
  #map-wrap{
    height: 30vh;
  }
</style>