Obtenez la latitude et la longitude en fonction du nom de l'emplacement avec L'API Google Autocomplete
j'ai une boîte de texte dans ma page qui reçoit un nom d'emplacement et un bouton avec du texte getLat&Long. Maintenant cliquant sur mon bouton, je dois afficher un message d'alerte de latitude et longitude de l'emplacement dans la zone de texte. Toute suggestion?
7 réponses
Vous pouvez utiliser le Google Geocoder service dans le API GoogleMaps pour convertir votre nom d'emplacement en latitude et longitude. Vous avez donc besoin d'un code comme:
var geocoder = new google.maps.Geocoder();
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK)
{
// do something with the geocoded result
//
// results[0].geometry.location.latitude
// results[0].geometry.location.longitude
}
});
mise à Jour
incluez-vous l'API javascript v3?
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false">
</script>
j'espère que cela peut aider quelqu'un dans le futur.
Vous pouvez utiliser le Google Geocoding API, comme dit avant, j'ai dû faire un peu de travail avec cette récemment, j'espère que cela aide:
<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script type="text/javascript">
function initialize() {
var address = (document.getElementById('my-address'));
var autocomplete = new google.maps.places.Autocomplete(address);
autocomplete.setTypes(['geocode']);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
});
}
function codeAddress() {
geocoder = new google.maps.Geocoder();
var address = document.getElementById("my-address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
alert("Latitude: "+results[0].geometry.location.lat());
alert("Longitude: "+results[0].geometry.location.lng());
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<input type="text" id="my-address">
<button id="getCords" onClick="codeAddress();">getLat&Long</button>
</body>
</html>
maintenant cela a aussi une fonction autocomlpete que vous pouvez voir dans le code, il récupère l'adresse de l'entrée et obtient automatiquement rempli par L'API en tapant.
Une fois que vous avez votre adresse appuyez sur le bouton et vous obtenez vos résultats via alerte si nécessaire. Notez également qu'il utilise la dernière API et charge la bibliothèque 'places' (lorsque l'API est appelée, elle utilise le paramètre 'libraries').
espérons que cela aide, et lire la documentation pour plus d'informations, santé.
Edit #1:Tripoter
http://maps.googleapis.com/maps/api/geocode/OUTPUT?address=YOUR_LOCATION&sensor=true
OUTPUT = JSON ou xml;
pour des informations détaillées sur Google map api passer par url:
http://code.google.com/apis/maps/documentation/geocoding/index.html
Espérons que cela aidera
voici le code que j'ai utilisé. Il fonctionne parfaitement.
var geo = new google.maps.Geocoder;
geo.geocode({'address':address},function(results, status){
if (status == google.maps.GeocoderStatus.OK) {
var myLatLng = results[0].geometry.location;
// Add some code to work with myLatLng
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
J'espère que cela aidera.
j'espère que cela sera plus utile pour le futur scope contain auto complete Google API avec latitude et longitude
var latitude = place.geometry.location.lat();
var longitude = place.geometry.location.lng();
Vue Complète
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete With Latitude & Longitude </title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
#pac-input {
background-color: #fff;
padding: 0 11px 0 13px;
width: 400px;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
text-overflow: ellipsis;
}
#pac-input:focus {
border-color: #4d90fe;
margin-left: -1px;
padding-left: 14px; /* Regular padding-left + 1. */
width: 401px;
}
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script>
function initialize() {
var address = (document.getElementById('pac-input'));
var autocomplete = new google.maps.places.Autocomplete(address);
autocomplete.setTypes(['geocode']);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
/*********************************************************************/
/* var address contain your autocomplete address *********************/
/* place.geometry.location.lat() && place.geometry.location.lat() ****/
/* will be used for current address latitude and longitude************/
/*********************************************************************/
document.getElementById('lat').innerHTML = place.geometry.location.lat();
document.getElementById('long').innerHTML = place.geometry.location.lng();
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<input id="pac-input" class="controls" type="text"
placeholder="Enter a location">
<div id="lat"></div>
<div id="long"></div>
</body>
</html>
je dirais le code suivant, vous pouvez utiliser ce <script language="JavaScript" src="http://j.maxmind.com/app/geoip.js"></script> pour obtenir la latitude et la longitude d'un lieu, mais il peut ne pas être très précis cependant, il a travaillé pour moi;
extrait de code ci-dessous
<!DOCTYPE html>
<html>
<head>
<title>Using Javascript's Geolocation API</title>
<script type="text/javascript" src="http://j.maxmind.com/app/geoip.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div id="mapContainer"></div>
<script type="text/javascript">
var lat = geoip_latitude();
var long = geoip_longitude();
document.write("Latitude: "+lat+"</br>Longitude: "+long);
</script>
</body>
</html>
entrez l'emplacement par Autocomplete et le reste de tous les champs: les valeurs de latitude et de Longititude sont remplies automatiquement.
Remplacer la clé API par votre clé API Google
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
</head>
<body>
<textarea placeholder="Enter Area name to populate Latitude and Longitude" name="address" onFocus="initializeAutocomplete()" id="locality" ></textarea><br>
<input type="text" name="city" id="city" placeholder="City" value="" ><br>
<input type="text" name="latitude" id="latitude" placeholder="Latitude" value="" ><br>
<input type="text" name="longitude" id="longitude" placeholder="Longitude" value="" ><br>
<input type="text" name="place_id" id="location_id" placeholder="Location Ids" value="" ><br>
<script type="text/javascript">
function initializeAutocomplete(){
var input = document.getElementById('locality');
// var options = {
// types: ['(regions)'],
// componentRestrictions: {country: "IN"}
// };
var options = {}
var autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
var lat = place.geometry.location.lat();
var lng = place.geometry.location.lng();
var placeId = place.place_id;
// to set city name, using the locality param
var componentForm = {
locality: 'short_name',
};
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById("city").value = val;
}
}
document.getElementById("latitude").value = lat;
document.getElementById("longitude").value = lng;
document.getElementById("location_id").value = placeId;
});
}
</script>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js?libraries=places&key=API KEY"></script>
<script src="https://fonts.googleapis.com/css?family=Roboto:300,400,500></script>