<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</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) {
get_current_address(position.coords.latitude, position.coords.longitude);
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
function get_current_address(lat, lon) {
var geo = '//maps.google.com/maps/api/geocode/json?latlng=' + lat + ',' + lon + '&sensor=true';
$.getJSON(geo, function(data) {
for (var i = 0, l = data.results[0].address_components.length; i < l; i++) {
var item = data.results[0].address_components[i];
if (item.types[0] == "locality") {
$('#city').html(item.long_name);
} else if (item.types[0] == "route") {
$('#location').html(item.long_name);
}
}
});
}
</script>
<p>City <span id="city"></span> </p>
<p>location <span id="location"></span> </p>
</body>
</html>
Click the button to get your coordinates.<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</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) {
get_current_address(position.coords.latitude, position.coords.longitude);
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
function get_current_address(lat, lon) {
var geo = '//maps.google.com/maps/api/geocode/json?latlng=' + lat + ',' + lon + '&sensor=true';
$.getJSON(geo, function(data) {
for (var i = 0, l = data.results[0].address_components.length; i < l; i++) {
var item = data.results[0].address_components[i];
if (item.types[0] == "locality") {
$('#city').html(item.long_name);
} else if (item.types[0] == "route") {
$('#location').html(item.long_name);
}
}
});
}
</script>
<p>City <span id="city"></span> </p>
<p>location <span id="location"></span> </p>
</body>
</html>
location
0 comments:
Post a Comment