Vue.js Get Geolocation

Vue.js Get Geolocation

Run

<!DOCTYPE html>
<html>
<head>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="app">
	<p>Lat = {{lat}} Lon ={{lon}}</p>
	<p>{{error}}</p>
	<button @click="myFunction()">Click Me</button>
</div>
<script>
 new Vue({
 el: '#app',
  
  data: {
	  error: '',
	  lat:'',
	  lon:''
  },  
   methods:{
    myFunction: function () {		
	 if(navigator.geolocation){
	 navigator.geolocation.getCurrentPosition(this.showPosition);
	 }else{
	 this.error = "Geolocation is not supported."; 
		 
	 }
    },
	showPosition:function (position) {	
		this.lat = position.coords.latitude;
		this.lon = position.coords.longitude;
	}
	}

});
</script>        
</body>
</html>

<!DOCTYPE html>
<html>
<head>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="app">
	<p>Lat = {{lat}} Lon ={{lon}}</p>
	<p>{{error}}</p>
	<button @click="myFunction()">Click Me</button>
</div>
<script>
 new Vue({
 el: '#app',
  
  data: {
	  error: '',
	  lat:'',
	  lon:''
  },  
   methods:{
    myFunction: function () {		
	 if(navigator.geolocation){
	 navigator.geolocation.getCurrentPosition(this.showPosition);
	 }else{
	 this.error = "Geolocation is not supported."; 
		 
	 }
    },
	showPosition:function (position) {	
		this.lat = position.coords.latitude;
		this.lon = position.coords.longitude;
	}
	}

});
</script>        
</body>
</html>

Copyrights@tutorialsplane.com