After initially loading the page, the map may not work properly in Vue.js. However, refreshing the page fixes this issue.
Can anyone provide assistance with this problem?
Here is the relevant code:
mounted() {
this.geolocate();
},
methods: {
async geolocate() {
this.getFloatDirections();
this.center = {
lat: this.lat,
lng: this.lng
};
this.coordinates = {
full_name: this.$route.query.name,
lat: this.lat,
lng: this.lng
};
},
getFloatDirections(){
this.lat = parseFloat(this.$route.params.lat);
this.lng = parseFloat(this.$route.params.lng);
},
getPosition: function(marker) {
return {
lat: marker.lat,
lng: marker.lng
};
},
toggleInfo: function(marker) {
this.infoPosition = this.getPosition(marker);
this.infoContent = marker.full_name;
this.infoOpened = true;
}
}
This is the image displayed before refreshing: https://i.sstatic.net/koAlp.png
And here is the image displayed after refreshing: https://i.sstatic.net/zo3nn.png