if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(pos => {
x.value = "" + pos.coords.longitude;
y.value = "" + pos.coords.latitude;
this.locations.push({
lng: pos.coords.longitude,
lat: pos.coords.latitude,
time: local.value,
picture: picture.value,
publicIp: publicIp.value,
privateIp: privateIp.value
});
console.log(this.locations);
console.log(local.value);
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(pos => {
x.value = "" + pos.coords.longitude;
y.value = "" + pos.coords.latitude;
this.locations.push({
lng: pos.coords.longitude,
lat: pos.coords.latitude,
time: local.value,
picture: picture.value,
publicIp: publicIp.value,
privateIp: privateIp.value
});
console.log(this.locations);
console.log(local.value);
- 1 Use an third party API. For example this Google one – Oscar R Commented Jul 4, 2019 at 9:57
2 Answers
Reset to default 2For getting the address from the latitude and longitude you will have to use some reverse geocoding API. Try searching for some free API which provides the same.
ArcGIS provides a free (and paid) API:
https://developers.arcgis./rest/geocode/api-reference/geocoding-reverse-geocode.htm
It provides an address for a given location (lat/lon). It doesn't even require an API key, but they suggest you get a free one to avoid rate limits.
Have fun implementing it :)
You need to use a reverse geocoding API like the following: https://developers.google./maps/documentation/javascript/examples/geocoding-reverse
Below an example from the link above:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Reverse Geocoding</title>
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#floating-panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
width: 350px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
#latlng {
width: 225px;
}
</style>
</head>
<body>
<div id="floating-panel">
<input id="latlng" type="text" value="40.714224,-73.961452">
<input id="submit" type="button" value="Reverse Geocode">
</div>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: 40.731, lng: -73.997}
});
var geocoder = new google.maps.Geocoder;
var infowindow = new google.maps.InfoWindow;
document.getElementById('submit').addEventListener('click', function() {
geocodeLatLng(geocoder, map, infowindow);
});
}
function geocodeLatLng(geocoder, map, infowindow) {
var input = document.getElementById('latlng').value;
var latlngStr = input.split(',', 2);
var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
geocoder.geocode({'location': latlng}, function(results, status) {
if (status === 'OK') {
if (results[0]) {
map.setZoom(11);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
infowindow.setContent(results[0].formatted_address);
infowindow.open(map, marker);
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
}
</script>
<script async defer
src="https://maps.googleapis./maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742373505a4431726.html
评论列表（0条）