step 11 : get location now using javascript in flutter

This commit is contained in:
sindhu
2024-08-27 17:58:59 +07:00
parent 7bd8527df2
commit 102760babc
7 changed files with 229 additions and 12 deletions

View File

@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html>
<head>
<!--
If you are serving your web app in a path other than the root, change the
@@ -25,25 +26,87 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="absensi_sas_flutter">
<!-- google sign in browser -->
<meta name="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" content="856240587825-klh0dfjc44bovajg1rpq5vbvs4g7rh5j.apps.googleusercontent.com">
<meta name="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"
content="856240587825-klh0dfjc44bovajg1rpq5vbvs4g7rh5j.apps.googleusercontent.com">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<link rel="icon" type="image/png" href="favicon.png" />
<title>absensi_sas_flutter</title>
<link rel="manifest" href="manifest.json">
<!-- This script adds the flutter initialization JS code -->
<script src="flutter.js" defer></script>
<script>
window.flutterLocationCallback = (data) => {
console.log('Received data from Flutter:', data);
window.flutterLocationData = data;
};
function getCurrentLocation(callback) {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
position => callback(position.coords.latitude, position.coords.longitude),
error => console.error('Geolocation error:', error)
);
} else {
console.error("Geolocation is not supported by this browser.");
}
}
function sendLocationToServer(latitude, longitude) {
fetch('https://devone.aplikasi.web.id/absensi/apiGetUserLocation.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: `latitude=${latitude}&longitude=${longitude}`
})
.then(response => response.json())
.then(data => {
console.log('Server response:', data);
// if (window.flutterLocationCallback) {
// window.flutterLocationCallback(data);
// } else {
// console.error('flutterLocationCallback is not defined');
// }
const queryString = new URLSearchParams(data).toString();
const newUrl = `${window.location.origin}${window.location.pathname}?${queryString}`;
// Update the URL with query parameters
window.history.replaceState(null, '', newUrl);
})
.catch(error => console.error('Request failed', error));
}
function getLocationAndSend() {
getCurrentLocation((latitude, longitude) => {
sendLocationToServer(latitude, longitude);
});
}
</script>
</head>
<body>
<script src="flutter_bootstrap.js" async></script>
<!-- <script>
var API_KEY = "AIzaSyCiN7EeJsUpXVLQKFfrj3sE5OTKebjpzek";
var script = document.createElement('script');
script.src = "https://maps.googleapis.com/maps/api/js?key=" + API_KEY;
document.head.appendChild(script);
</script> -->
<script src="flutter_bootstrap.js" async></script>
<script>
// var API_KEY = "AIzaSyCiN7EeJsUpXVLQKFfrj3sE5OTKebjpzek";
// var API_KEY = "AIzaSyCztj0X7erH-uqotFfe_Yd-Nt0oBJu6FeM";
// var script = document.createElement('script');
// script.src = "https://maps.googleapis.com/maps/api/js?key=" + API_KEY;
// document.head.appendChild(script);
// tambahan
window.onload = function () {
getLocationAndSend();
};
// tambahan
</script>
</body>
</html>
</html>