I am making a leaflet map with geolocation that worked on vue2. Now when I use my code for setView on the leaflet I get the error
"this.map.setView is not a function
TypeError: this.map.setView is not a function
at eval (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/mapLeafletVue.vue?vue&type=script&lang=js:44:20)"
My Dependencies:
"dependencies": {
"core-js": "^3.8.3",
"leaflet": "^1.9.4",
"vue": "^2.6.14",
"vue2-leaflet": "^2.7.1",
"vuetify": "^2.6.0"
},
My Codes:
<template>
<v-app>
<v-main>
<!-- <v-btn color="blue" @click="getlocation()" class="ma-9">get location</v-btn> -->
<v-card class="ma-10 d-flex flex-column align-center pa-5">
<v-card-title primary-title>
your location
</v-card-title>
<v-card-text>
<p>lat: {{lat}} <span class="ml-4">lng: {{lng}}</span> </p>
</v-card-text>
<div class="mx-9">
<div id="mapContainer" style="width:300px;height:300px"></div>
</div>
</v-card>
</v-main>
</v-app>
</template>
<script>
import L from 'leaflet'
export default {
name: 'App',
data: () => ({
lat :0,
lng :0,
map:'',
mapContainer:''
}),
mounted(){
this.getlocation()
this.map = L.map('mapContainer').setView([51.505, -0.09], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 17,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(this.map);
},
methods:{
getlocation(){
if( navigator.geolocation){
navigator.geolocation.watchPosition((position)=>{
this.lat= position.coords.latitude
this.lng= position.coords.longitude
this.map.setView([this.lat , this.lng],14)
L.marker([this.lat,this.lng]).addTo(this.map)
.bindPopup(`<b>this is your location.</b><br>${this.lat} | ${this.lng}`)
})
}
}
},
};
</script>