screen_rotation
Copied to Clipboard
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <h3>Vue Js Calculate distance between latitude Longitude Points</h3> <div id="app"> <p>Latitude1: {{lat1}}, Longitude1: {{long1}}</p> <p>Latitude2: {{lat2}}, Longitude2: {{long2}}</p> <p>Distance: {{ calculateDistance(this.lat1, this.long1, this.lat2, this.long2) }} Km</p> </div> <script type="module"> const app = new Vue({ el: "#app", data() { return { lat1: 40.7128, long1: 74.0059, lat2: 51.5074, long2: 0.1278, }; }, methods: { calculateDistance(lat1, lng1, lat2, lng2) { const radius = 6371; // Earth's radius in km const dLat = this.toRadians(lat2 - lat1); const dLng = this.toRadians(lng2 - lng1); const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(this.toRadians(lat1)) * Math.cos(this.toRadians(lat2)) * Math.sin(dLng / 2) * Math.sin(dLng / 2); const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); const distance = radius * c; return distance.toFixed(2); }, toRadians(degree) { return degree * (Math.PI / 180); } } }) </script> </body> </html>