Vue местоположение в режиме реального времени поделиться на карте

Question

В настоящее время я работаю над приложением, в котором вы должны видеть всех подключенных пользователей, включая себя.Вы видите пользователя (местоположение) с серыми точками, а сама точка оранжевая.

Вы также должны иметь возможность «пометить» местоположение, это местоположение сохраняется в базе данных sqlite, а также совместно используется всеми подключеннымиклиенты, которые отображаются на карте.

Теперь дело в том, что я много пробовал, но, похоже, ничего не работает.Я использую следующие плагины:

Код, который я пытался использовать, выглядит следующим образом:

<template>
    <div>
        <mapbox
            access-token="[REMOVED]"
            :map-options="{
                style: 'mapbox://styles/mapbox/streets-v10',
                center: [0.0, 0.0],
                zoom: 15,
            }"
            :geolocate-control="{
                show: true,
                position: 'top-right',
            }"
            @map-load="loaded"
            @geolocate-error="geolocateError"
            @geolocate-geolocate="geolocate"
        />
        <button class="btn btn-contained btn-success add-location" v-on:click="addLocation"><span>Button</span></button>
    </div>

</template>

<script>
    import Mapbox from 'mapbox-gl-vue'

    export default {
        components: { Mapbox },
        props: {
            currLat: Number,
            currLon: Number,
            allPoints: Array
        },
        // Mounted (page load), we ask to track
        mounted: function () {
            const options = {
                enableHighAccuracy: true
            };
            this.$watchLocation(options)
                .then(coordinates => {
                    // Set the center to my coordinates
                    this.currLat = coordinates.lat;
                    this.currLon = coordinates.lng;
                    // Emit the user data to all connected devices.
                    this.$socket.emit('USER_COORDS', {
                        'user': this.$socket.id,
                        'lat': this.currLat,
                        'lon': this.currLon
                    });
                });
        },
        methods: {
            loaded(map) {
                map.addLayer({
                    id: 'points',
                    type: 'symbol',
                    source: {
                        type: 'geojson',
                        data: {
                            type: 'FeatureCollection',
                            features: [

                                {
                                    type: 'Feature',
                                    geometry: {
                                        type: 'Point',
                                        coordinates: [0.0,0.0],
                                    },
                                    properties: {
                                        title: 'VKc',
                                        icon: 'triangle',
                                    },
                                },

                            ],
                        },
                    },
                    layout: {
                        'icon-image': '{icon}-15',
                        'text-field': '{title}',
                        'text-offset': [0, 0.6],
                        'text-anchor': 'top',
                    },
                });
            },
            geolocateError(control, positionError) {
            console.log(positionError);
            Latte.ui.notification.create({
              title: "An error occurred!",
              message: "We could not get your location, please try again by reloading the application."
            });
            },
            geolocate(control, position) {
                console.log(
                    `User position: ${position.coords.latitude}, ${position.coords.longitude}`
                )
              },
            addLocation: function() {
                this.$socket.emit('NEW_LOCATION', {
                    name: 'VK1',
                    lat: this.currLat,
                    lon: this.currLon
                });
            }
        },
        sockets: {
            USER_COORDS_DATA: function (data) {
                // user connects, data of the current location gets emitted

                // console.log(data)
            },
            NEW_LOCATION_DATA: function (data) {
                // Returned data from the server (after storage)
                console.log(data)
            },
        },
    }
</script>

<style>
    @import '../../node_modules/mapbox-gl/dist/mapbox-gl.css';
    #map {
        width: 100%;
        height: calc(100vh - var(--app-bar-height));
    }
    .btn.add-location {
        position: absolute;
        left: 2rem;
        bottom: 2rem;
    }
</style>

Этот результатв следующем представлении:

(кнопка нуждается в стилизации, но здесь это не проблема)

В спине у меня естьработает сервер узлов, который в настоящее время просто прослушивает сообщения и отправляет их обратно (io.emit()), поэтому все пользователи должны получить это обновление.

Как я могу сделать то, что я описал выше?Приложение, которое отображает всех подключенных пользователей, себя в другом цвете, с возможностью сохранения местоположений.