app_vue2/components/Ui/Map.vue

<!--
Leaflet map

@see https://leafletjs.com/
-->

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

      <v-btn class="mr-4 mt-2 mb-2 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, ToRefs
} from '@nuxtjs/composition-api'
import { QUERY_TYPE, TYPE_ALERT } from '~/types/enums'
import { AddressPostal } from '~/models/Core/AddressPostal'
import { AnyJson, alert } from '~/types/interfaces'

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 ?? 0.0)
    const longitude: Ref<number> = ref(address.value.longitude ?? 0.0)

    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 () => {
      const response = await $dataProvider.invoke({
        type: QUERY_TYPE.DEFAULT,
        url: `/api/gps-coordinate-searching?street=${address.value.streetAddress}&cp=${address.value.postalCode}&city=${address.value.addressCity}`
      })
      const data = response.data
      if (data.length > 0) {
        latitude.value = data[0].latitude
        longitude.value = data[0].longitude

        address.value.latitude = data[0].latitude
        address.value.longitude = data[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) => {
      if(event){
        address.value.latitude = event.lat
        address.value.longitude = event.lng
        emit('updateAddress', address.value)
      }
    }

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

</script>

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