Vote count:
0
I am still learning to use google maps and watch position. I have found some code online that I am using to learn but as I test it out with Chrome both on my desktop and my android phone I notice that the map refreshes every time that it collects a new position. Is it possible to have the location refresh without the need to refresh the whole page?
<!DOCTYPE html>
<html>
<head>
<script src="http://ift.tt/oRGprm"></script>
<script>
jQuery(window).ready(function(){
gMapInit();
jQuery("#watchPositionBtn").click(initiate_watchlocation);
jQuery("#stopWatchBtn").click(stop_watchlocation);
});
function gMapInit(){
var google_tile = "http://ift.tt/1hS8Zgu"
jQuery("#googleMap").html(
jQuery(document.createElement("img")).attr("src", google_tile)
);
}
var watchProcess = null;
function initiate_watchlocation() {
if (watchProcess == null) {
watchProcess = navigator.geolocation.watchPosition(handle_geolocation_query, handle_errors);
}
}
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 = "position.coords.latitude: " + position.coords.latitude + "<br/>" +
"position.coords.longitude: " + position.coords.longitude + "<br/>" +
"position.coords.altitude: " + position.coords.altitude + "<br/>" +
"position.coords.accuracy(meters): " + position.coords.accuracy + "<br/>" +
"position.coords.altitudeAccuracy(meters): " + position.coords.altitudeAccuracy + "<br/>" +
"position.coords.heading: " + position.coords.heading + "<br/>" +
"position.coords.speed: " + position.coords.speed + "<br/>" +
"position.timestamp: " + new Date(position.timestamp);
jQuery("#APIReturnValues").html(text);
jQuery("#APIReturnValues").css("border","3px solid green");
var image_url = "http://ift.tt/R2SqEo" + position.coords.latitude + ',' + position.coords.longitude +
"&zoom=18&size=600x800&markers=color:blue|label:S|" + position.coords.latitude + ',' + position.coords.longitude;
jQuery("#googleMap").html(
jQuery(document.createElement("img")).attr("src", image_url)
);
}
</script>
</head>
<body>
<div>
<button id="watchPositionBtn" >Watch Current Position</button>
<button id="stopWatchBtn" >Stop Watch Position</button>
</div>
<div id="APIReturnValues"></div>
<div id="googleMap" style=" padding:1px; border:1px solid; height:400px; width:300px;">
</div>
</body>
</html>
asked 1 min ago
Aucun commentaire:
Enregistrer un commentaire