Vue2 js. Как установить маркер для текущего местоположения с помощью геолокации в Google Maps - PullRequest
0 голосов
/ 10 апреля 2020

Я использую Vue2 js -Google Maps и хочу указать маркер на мое текущее местоположение, когда страница загружается с помощью геолокации. Я использую его с автозаполнением. Приложение запрашивает мое местоположение, когда страница загружается, и я получаю согласованное взамен. Как я могу указать маркер на мое текущее местоположение, когда страница загружена?

<script>
    export default {
        name: "GoogleMap",
        data() {
            return {
                // default to Montreal to keep it simple
                // change this to whatever makes sense
                center: { lat: 24.774, lng: 46.738  },
                markers: [],
                places: [],
                currentPlace: null,
                adr_address: null,
                adr_name: null,
                adr_lat: null,
                adr_lng: null,
                addOption: false,
                coordinates: null,
                after_drag_lat: '',
                after_drag_lng: '',
                final_lat: '',
                final_lng: '',

                showMapWithLat: '',
                showMapWithLng: '',
                full_feature: true,

                draggable: true,
            };
        },
        mounted() {
            this.geolocate();
        },
        methods: {
            // receives a place object via the autocomplete component
            setPlace(place) {

                console.info(place); return

                this.markers = [];
                this.currentPlace = place;
                this.adr_name = this.currentPlace.name;
                this.adr_address = this.currentPlace.formatted_address;
                this.adr_lat = this.currentPlace.geometry.location.lat();
                this.adr_lng = this.currentPlace.geometry.location.lng();
                this.addOption = true;
                this.addMarker();
            },
            updateCoordinates(location) {
                console.log('update coordinated', location);
                this.after_drag_lat = location.latLng.lat();
                this.after_drag_lng = location.latLng.lng();
                let lat = this.after_drag_lat;
                let lng = this.after_drag_lng;
                this.getTown(lat, lng);
            },
            getTown (lat, lng) {
                console.info('Get Town', lat, lng)
                var geocoder = new google.maps.Geocoder();
                var latlng = {lat, lng};
                geocoder.geocode({'location': latlng}, (results, status) => {
                    if (status === 'OK') {
                         this.$parent.restaurant.address = results[0].formatted_address;
                         this.$parent.restaurant.lat = results[0].geometry.location.lat();
                         this.$parent.restaurant.lng = results[0].geometry.location.lng();
                    }
                });
            },

            dragableSettings(){
                this.draggable = false;
            },

            addMarker() {

                if (this.currentPlace) {
                    this.final_lat = this.currentPlace.geometry.location.lat();
                    this.final_lng = this.currentPlace.geometry.location.lng();
                   // }
                    const marker = {
                       lat: this.final_lat,
                       lng: this.final_lng,
                    };
                    this.markers.push({ position: marker });
                    this.places.push(this.currentPlace);
                    this.center = marker;
                    this.currentPlace = null;
                    this.$parent.showAddressTextArea = true;
                    this.shareWithParent();
                }
                else
                {
                    this.markers = [];
                    const marker = {
                        lat: Number(this.showMapWithLat),
                        lng: Number(this.showMapWithLng),
                    };
                    this.markers.push({ position: marker });
                    this.places.push(this.currentPlace);
                    this.center = marker;
                    this.currentPlace = null;
                    this.$parent.showAddressTextArea = true;
                }
            },
            geolocate: function() {
                if(navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(position => {
                        let geolocation = {
                            lat : position.coords.latitude,
                            lng : position.coords.longitude
                        }
                    })
                }
            },
            shareWithParent(){
                this.$parent.userAddress();
            }
        }
    };
</script>
...