How do I get Geolocation and return it into a form when I click on a button.
So when click the Geolocation get my location and then return the output in the from so I can use it later on. /
Geolocation
<html>
<body>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Get geolocation and put into from</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
<form action="geo/ruteplanlag.php" method="get">
<input style="width: 98%; margin: 20px auto; text-align: center;" name="startadr" type="text" value="(Custom value like Orlando or geolocation) " />
<input style="width: 98%; margin: 20px auto; text-align: center;" name="slutadr" type="text" value="Miami" />
<div class="buttonHolder">
<input type="submit" value="Start ruteplanlægning">
</div>
</form>
</body>
</html>
How do I get Geolocation and return it into a form when I click on a button.
So when click the Geolocation get my location and then return the output in the from so I can use it later on. http://jsfiddle/Mikki10/as3mg177/1/
Geolocation
<html>
<body>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Get geolocation and put into from</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
<form action="geo/ruteplanlag.php" method="get">
<input style="width: 98%; margin: 20px auto; text-align: center;" name="startadr" type="text" value="(Custom value like Orlando or geolocation) " />
<input style="width: 98%; margin: 20px auto; text-align: center;" name="slutadr" type="text" value="Miami" />
<div class="buttonHolder">
<input type="submit" value="Start ruteplanlægning">
</div>
</form>
</body>
</html>
- geolocation would i like to return like this in the from position.coords.latitude + ", " + position.coords.longitude; – Mikki Sørensen Commented May 5, 2015 at 14:40
-
You are missing
</form>in your html. apart from that, are you getting any error while executing this code? – Lal Commented May 5, 2015 at 14:40 - ctrl+c ctrl+v mistake :) and no error – Mikki Sørensen Commented May 5, 2015 at 14:44
- and then what are you trying to achieve? – Lal Commented May 5, 2015 at 14:44
- What's the problem? Do the coordinates just not show up for you? I copied this code and the coordinates display when the button is clicked. – Don't Panic Commented May 5, 2015 at 14:45
2 Answers
Reset to default 3I now got the working code. http://jsfiddle/Mikki10/gs5ed5sc/1/
<script type="text/javascript">
function getLocationConstant() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(onGeoSuccess, onGeoError);
} else {
alert("Your browser or device doesn't support Geolocation");
}
}
// If we have a successful location update
function onGeoSuccess(event) {
document.getElementById("Latitude").value = event.coords.latitude;
document.getElementById("Longitude").value = event.coords.longitude;
document.getElementById("Position1").value = event.coords.latitude + ", " + event.coords.longitude;
}
// If something has gone wrong with the geolocation request
function onGeoError(event) {
alert("Error code " + event.code + ". " + event.message);
}
</script>
<form action="geo/ruteplanlag.php" method="get">
<div id="divSample" class="hideClass">Latitude:
<input type="text" id="Latitude" name="Latitude" value="">
<br>
<br>Longitude:
<input type="text" id="Longitude" name="Longitude" value="">
<br>
</div>
<br>Position
<input type="text" id="Position1" name="Position1" value="Miami">
<br>
<br>
<input type="button" value="Get Location" onclick="getLocationConstant()" />
<br>
<br>
<input type="submit" value="Add GPS Location" class=small>
</form>
Use this for position.coords.latitude & position.coords.longitude not event.coords.latitude & event.coords.longitude, its because patible most browser on mobile for geolocation.
<script type="text/javascript">
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError,{enableHighAccuracy: true,timeout: 60000,maximumAge: 0});
} else {
alert("Geolocation is not supported by this browser.");
}
}
function showPosition(position) {
document.getElementById("lat").value = position.coords.latitude;
document.getElementById("long").value = position.coords.longitude;
document.getElementById("latlong").value = position.coords.longitude +", "+ position.coords.longitude;
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
</script>
<form action="geo/ruteplanlag.php" method="get">
<br>
Latitude:
<input type="text" id="Lat" name="Latitude" value="">
<br>
<br>Longitude:
<input type="text" id="Long" name="Longitude" value="">
<br>
</div>
<br>Position
<input type="text" id="latlong" name="latlong" value="Miami">
<br>
<br>
<input type="button" value="Get Location" onclick="getLocation()" />
<br>
<br>
<input type="submit" value="Add GPS">
</form>
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745381535a4625249.html
评论列表（0条）