nova-map-fields/resources/js/components/fields/Marker.vue

<template>
    <field-map :center="position" :field="field">
        <l-marker :lat-lng="position" :draggable="edit" @dragend="onDragEnd" />
    </field-map>
</template>

<script>
import { LMarker } from "vue2-leaflet";

export default {
    props: {
        value: {
            type: Object,
            default: null,
        },
        field: {
            type: Object,
            required: true,
        },
        edit: {
            type: Boolean,
            default: false,
        },
    },

    computed: {
        position() {
            return L.latLng(
                this.value.lat || this.field.map.center.latitude,
                this.value.lng || this.field.map.center.longitude
            );
        },
    },

    mounted() {
        this.registerWatchers();
    },

    methods: {
        onDragEnd(evt) {
            let latLng = evt.target.getLatLng();

            this.$emit("input", {
                lat: latLng.lat,
                lng: latLng.lng,
            });
        },

        registerWatchers() {
            this.getGlobalFieldComponents().forEach((component) => {
                if (
                    [
                        this.field.latitudeField,
                        this.field.longitudeField,
                    ].includes(component.field.attribute)
                ) {
                    component.$watch(
                        "value",
                        (value) => {
                            this.value[component.field.attribute] = value;
                        },
                        { immediate: true }
                    );
                }
            });
        },

        getGlobalFieldComponents(components = null) {
            if (!components) {
                components = this.$root.$children;
            }

            let returnArray = [];

            components.forEach((component) => {
                if (component.field) {
                    return returnArray.push(component);
                }

                returnArray = returnArray.concat(
                    this.getGlobalFieldComponents(component.$children)
                );
            });

            return returnArray;
        },
    },

    components: {
        LMarker,
    },
};
</script>