All geek questions in one place

HTML 5 geolocation with phoneGap

I created a script that will show the user's location using the geolocation library, and everything works fine. I exported this HTML 5 script using PhoneGap and see that in Settings-> My App Hosting Services is set to On. Therefore, I assumed that every time I run my application, I would not receive a regular invitation ".... would like to use your current location?" with the options "Do not allow" or "OK."

I don’t want people to click "Allow every time they open my application." Is there a reason why the application does not use the settings from services-> Location settings? The following is a simple script:

<!DOCTYPE html> <html> <head> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <link rel="apple-touch-icon-precomposed" href="custom_icon_precomposed.png"/> <link rel="apple-touch-startup-image" href="apple-touch-icon-precomposed.png"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script> <script> jQuery(window).ready(function(){ jQuery("#btnInit").click(initiate_watchlocation); jQuery("#btnStop").click(stop_watchlocation); }); var watchProcess = null; function initiate_watchlocation() { if (watchProcess == null) { watchProcess = navigator.geolocation.watchPosition(handle_geolocation_query, handle_errors, {enableHighAccuracy:true}); } } function stop_watchlocation() { if (watchProcess != null) { navigator.geolocation.clearWatch(watchProcess); watchProcess = null; } } function handle_errors(error) { switch(error.code) { case error.PERMISSION_DENIED: alert("user did not share geolocation data"); break; case error.POSITION_UNAVAILABLE: alert("could not detect current position"); break; case error.TIMEOUT: alert("retrieving position timedout"); break; default: alert("unknown error"); break; } } function handle_geolocation_query(position) { var text = "Latitude: " + position.coords.latitude + "<br/>" + "Longitude: " + position.coords.longitude + "<br/>" + "Accuracy: " + position.coords.accuracy + "m<br/>" + "Time: " + new Date(position.timestamp); jQuery("#info").html(text); var image_url = "http://maps.google.com/maps/api/staticmap?sensor=false&center=" + position.coords.latitude + ',' + position.coords.longitude + "&zoom=14&size=300x400&markers=color:blue|label:S|" + position.coords.latitude + ',' + position.coords.longitude; jQuery("#map").remove(); jQuery(document.body).append( jQuery(document.createElement("img")).attr("src", image_url).attr('id','map') ); } </script> </head> <body> <div> <button id="btnInit" >Monitor my location</button> <button id="btnStop" >Stop monitoring</button> </div> <div id="info"></div> </body> </html>
+6
source share
1 answer

OK. I looked all over and found that you should wait until the device is ready, and then call your window.ready jquery inside to use your own functions. Thought I'd post this as a noob to find the answer I was looking for.

  // Wait for PhoneGap to load // document.addEventListener("deviceready", onDeviceReady, false); // PhoneGap is ready // function onDeviceReady() { jQuery(window).ready(function(){ jQuery("#btnInit").click(initiate_watchlocation); jQuery("#btnStop").click(stop_watchlocation); }); }
+2
source

Source: https://habr.com/ru/post/898419/

More articles:


All Articles