How to save real-time gps coordinates from geolocation watch into mysql table
Question
I'm fairly new to JS and PHP but I have been working on a large project which has many features for several months and its coming along nicely. The program is largely PHP and JS and will be used on computers in a fleet of vehicles.
One of the program features will use geofences and geolocation.watchPosition to monitor the user's GPS location and send a notification if the user leaves an assigned geofence.
What I need to accomplish is a way to continuously track the user's current location using geolocation.watchPosition and store any changes into the mysql table as they occur so that if the user leaves a defined geofenced area, they receive a notification that they have left the area.
I am able to obtain the users location, update the database with their login and logout locations, and calculate the difference in distance between the two locations. I have the geofences already configured.
How can use geolocation.watchPosition, JS and PHP to update a mysql table each time the user's gps location changes?
The following code sample is what I use to get the user's location and watch their location, but I have not found a way to update the mysql table each time the "info" variable, which contains their location, changes.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> </head> <body> <main class="container"> <div id="map" class="map"></div> <!-- For displaying user's coordinate or error message. --> <div id="info" class="info"></div> </main> <script async defer src="https://maps.googleapis.com/maps/api/js?key=[KEY]&callback=init"></script> </body> </html> <script type="text/javascript"> const createMap = ({ lat, lng }) => { return new google.maps.Map(document.getElementById('map'), { center: { lat, lng }, zoom: 19 }); }; const createMarker = ({ map, position }) => { return new google.maps.Marker({ map, position }); }; const getCurrentPosition = ({ onSuccess, onError = () => { } }) => { if ('geolocation' in navigator === false) { return onError(new Error('Geolocation is not supported by your browser.')); } return navigator.geolocation.getCurrentPosition(onSuccess, onError); }; const getPositionErrorMessage = code => { switch (code) { case 1: return 'Permission denied.'; case 2: return 'Position unavailable.'; case 3: return 'Timeout reached.'; default: return null; } } function init() { const initialPosition = { lat: 37.658440, lng: -120.993629 }; const map = createMap(initialPosition); const marker = createMarker({ map, position: initialPosition }); getCurrentPosition({ onSuccess: ({ coords: { latitude: lat, longitude: lng } }) => { marker.setPosition({ lat, lng }); map.panTo({ lat, lng }); }, onError: err => alert(`Error: ${getPositionErrorMessage(err.code) || err.message}`) }); } // New function to track user's location. const trackLocation = ({ onSuccess, onError = () => { } }) => { if ('geolocation' in navigator === false) { return navigator.geolocation.watchPosition(onSuccess, onError, { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }); }; // Use watchPosition instead. return navigator.geolocation.watchPosition(onSuccess, onError); }; function init() { const initialPosition = { lat: 37.658440, lng: -120.993629 }; const map = createMap(initialPosition); const marker = createMarker({ map, position: initialPosition }); // Use the new trackLocation function. trackLocation({ onSuccess: ({ coords: { latitude: lat, longitude: lng } }) => { marker.setPosition({ lat, lng }); map.panTo({ lat, lng }); }, onError: err => alert(`Error: ${getPositionErrorMessage(err.code) || err.message}`) }); } function init() { const initialPosition = { lat: 37.658440, lng: -120.993629 }; const map = createMap(initialPosition); const marker = createMarker({ map, position: initialPosition }); const $info = document.getElementById('info'); trackLocation({ onSuccess: ({ coords: { latitude: lat, longitude: lng } }) => { marker.setPosition({ lat, lng }); map.panTo({ lat, lng }); // Print out the user's location. $info.textContent = `Lat: ${lat} Lng: ${lng}`; // Don't forget to remove any error class name. $info.classList.remove('error'); }, onError: err => { // Print out the error message. $info.textContent = `Error: ${getPositionErrorMessage(err.code) || err.message}`; // Add error class name. $info.classList.add('error'); } }); } </script>
1 answers
solution1
0 2020-03-03 08:54:54
wacthposition returns an id on each new position. May be you can try to make a function (callback, promise, interval...) looking for this change. After it occurs, you can insert data into your DB.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.