2012-06-22 2 views
20

Je souhaite obtenir la latitude et la longitude d'une ville en fournissant l'API avec le nom de la ville. Cela devrait fonctionner pour la plupart des villes, peu importe comment l'utilisateur entre la ville.Google maps obtenir la latitude et la longitude ayant le nom de la ville?

Par exemple:

City peut être 'miami, États-Unis' ou de la ville peut être 'miami, États-Unis'

Comment puis-je imprimer sa latitude?

Répondre

45

Vous pouvez trouver le code jsfiddled ici: http://jsfiddle.net/YphZw/ ou ci-dessous:

$("#btn").click(function(){ 
 
      var geocoder = new google.maps.Geocoder(); 
 
    geocoder.geocode({ 'address': 'miami, us'}, function(results, status) { 
 
      if (status == google.maps.GeocoderStatus.OK) { 
 
      alert("location : " + results[0].geometry.location.lat() + " " +results[0].geometry.location.lng()); 
 
      } else { 
 
      alert("Something got wrong " + status); 
 
      } 
 
     }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
<head> 
 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 
 
</head> 
 
<body> 
 
    <input id="btn" type="button" value="search for miami coordinates" /> 
 
</body> 
 
</html>

Si vous voulez plus d'exemples pour l'API Javascript, essayez ce lien: https://developers.google.com/maps/documentation/javascript/examples/

Le code que j'ai écrit est inspiré de l'exemple geocoding-simple.

Cordialement.

EDIT 1:

Vous pouvez y parvenir en utilisant une bibliothèque PHP non officielle. Consultez cet exemple: http://www.bradwedell.com/phpgooglemapapi/demos/geocoding.php (Le code est en bas =

+0

Existe-t-il un moyen de faire la même chose avec PHP? Merci – lisovaccaro

12

Vous pouvez utiliser le service de géocodage de Google, par exemple,

http://maps.googleapis.com/maps/api/geocode/xml?address=Miami+FL&sensor=false

Cela vous donne des données géoréférencées retour dans une variété de formats (JSON, XML, etc.). Dans tous les cas, l'emplacement est définitivement dans le bloc de données renvoyé.

Les API docs sont à:

https://developers.google.com/maps/documentation/geocoding/

+0

Le lien API Docs que vous avez donné ci-dessus et la méthode que vous avez décrite concernent les services Web de l'API Google Maps et non ceux de Javascript. – Zakaria

+0

Doh! Désolé - le lien vers l'API JS (très simllar) est sur cette page cependant. – debracey

2

Cela semble inutilement compliqué Voici un exemple « événements à proximité » carte Il prendra City, State s, les convertir en latLng coords, et mettre des marqueurs sur un.. carte:.

// Nearby Events with Google Maps 
window.nearbyEventsMap =() => { 
    const centerOfUS = { 
     lat: 37.09024, 
     lng: -95.712891 
    } 

    // Create a map object and specify the DOM element for display. 
    const map = new google.maps.Map(document.querySelector('#nearby_events_map'), { 
     center: centerOfUS, 
     scrollwheel: false, 
     zoom: 4 
    }) 

    // Create a marker and set its position. 
    const geocoder = new google.maps.Geocoder() 

    // Filter out duplicate cityStates 
    let cityStates = {} 
    document.querySelectorAll('.nearby_event_city_state').forEach(event => { 
     cityStates[event] = event.innerText 
    }) 

    // `cityState` is in the format of "City, State". It's not picky about state being a word or the abbreviation. 
    for (const cityState in cityStates) { 
     const location = cityStates[cityState] 

     geocoder.geocode({ 
      address: location 
     }, function (results, status) { 
      if (status === 'OK') { 
       const result = results[0].geometry.location 
       const lat = result.lat() 
       const lng = result.lng() 
       const latLng = { 
        lat, 
        lng 
       } 

       return new google.maps.Marker({ 
        map: map, 
        position: latLng 
       }) 
      } 
     }) 
    } 
} 
// /Nearby Events with Google Maps 

Assurez-vous d'inclure vos balises <script>

<script src="/dist/js/main.js"></script> 

<!-- We're loading this after the main.js script so the callback from main.js will be available to it. --> 
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=nearbyEventsMap"></script> 

StackOverflow s'il vous plaît joindre à tout le monde et g markdown GitHub et coloration syntaxique ...

Questions connexes