Я использую 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>