Javascript Girl
  1. Javascript Girl
  3. Obtenir l'adresse de localisation de Latitude et Longitude dans Google Maps
Intereting Posts
Javascript onclick create (element) div viz boîte à outils Créez un fichier en mémoire pour l'utilisateur à télécharger, pas via le serveur Javascript ne charge pas les données binaires Forme appropriée pour formater la date à partir de la base de données en utilisant javascript / jquery Impossible de lire le «protocole» de propriété de indéfini Pause de ligne pour d3 circle title tooltipText Obtention de valeurs à partir de la chaîne de requête dans une url en utilisant AngularJS $ location Limiter les entrées totales affichées par le datalist Comprendre le flux de code avec rendement / générateurs Requête Sails.js sur une valeur associée Chargez les éléments de liste dynamiquement avec JQuery Exécuter la fonction javascript lorsque l'utilisateur finit de taper à la place de la clé? Comment créer un popup modal personnalisé – et comment le fermer en cliquant hors de lui Utilisation d'image.complete pour trouver si l'image est mise en cache sur chrome? Conversion des nucléotides en acides aminés en utilisant JavaScript

Obtenir l'adresse de localisation de Latitude et Longitude dans Google Maps

Je veux après avoir cliqué sur google map et obtenir Latitude et Longitude obtenir un lieu de localisation de leur part et le mettre (adresse) dans la input#searchTextField . Que fais-je?

J'ai essayé comme, mais ne travaillez pas pour moi:

DEMO: http://jsfiddle.net/DXkZJ/ 

 <input id="searchTextField" type="text" size="50" style="text-align: left;width:357px;direction: ltr;"> <div id="map_canvas" style="height: 350px;width: 500px;margin: 0.6em;"></div> $(function () { var lat = 44.88623409320778, lng = -87.86480712897173, latlng = new google.maps.LatLng(lat, lng), image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png'; //zoomControl: true, //zoomControlOptions: google.maps.ZoomControlStyle.LARGE, var mapOptions = { center: new google.maps.LatLng(lat, lng), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP, panControl: true, panControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT }, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.LARGE, position: google.maps.ControlPosition.TOP_left } }, map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions), marker = new google.maps.Marker({ position: latlng, map: map, icon: image }); var input = document.getElementById('searchTextField'); var autocomplete = new google.maps.places.Autocomplete(input, { types: ["geocode"] }); autocomplete.bindTo('bounds', map); var infowindow = new google.maps.InfoWindow(); google.maps.event.addListener(autocomplete, 'place_changed', function (event) { infowindow.close(); var place = autocomplete.getPlace(); if (place.geometry.viewport) { map.fitBounds(place.geometry.viewport); } else { map.setCenter(place.geometry.location); map.setZoom(17); } moveMarker(place.name, place.geometry.location); alert(place.name); $('.MapLat').val(place.geometry.location.lat()); $('.MapLon').val(place.geometry.location.lng()); }); google.maps.event.addListener(map, 'click', function (event) { $('.MapLat').val(event.latLng.lat()); $('.MapLon').val(event.latLng.lng()); alert(event.latLng.place.name) }); $("#searchTextField").focusin(function () { $(document).keypress(function (e) { if (e.which == 13) { return false; infowindow.close(); var firstResult = $(".pac-container .pac-item:first").text(); var geocoder = new google.maps.Geocoder(); geocoder.geocode({ "address": firstResult }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { var lat = results[0].geometry.location.lat(), lng = results[0].geometry.location.lng(), placeName = results[0].address_components[0].long_name, latlng = new google.maps.LatLng(lat, lng); moveMarker(placeName, latlng); $("input").val(firstResult); alert(firstResult) } }); } }); }); function moveMarker(placeName, latlng) { marker.setIcon(image); marker.setPosition(latlng); infowindow.setContent(placeName); //infowindow.open(map, marker); } });​

D'accord, d'abord, vous avez besoin de géocodage inverse, pas de géocodage régulier, car vous passez d'une latitude / longitude dans une adresse plutôt que dans l'autre sens (voir référence ). Deuxièmement, votre auditeur clé ne ferait jamais rien parce qu'il déclenche presque tout de suite des return false ; Dans ce cas, vous voulez probablement event.stopPropogation() . En outre, google maps intercepte les clics de votre souris à plus grande profondeur dans l'arbre DOM que le document , de sorte que l'événement ne sera jamais écouté de toute façon.

Donc, ce que j'ai fait était de changer votre géocode en un géocode inversé, ainsi que de déplacer le code dans l'auditeur de document dans l'écouteur de google. Si vous souhaitez conserver le comportement de l'auditeur ajouté sur la mise au point, vous pouvez simplement créer un nouvel auditeur sur l'objet de la carte. Voici un jsfiddle de travail démontrant ces changements , j'espère que cela aide.

Jetez un coup d'œil aux développeurs de gmap. Pour le sujet de géocodage inversé (recherche d'adresse) . Vous aurez votre réponse.

Ajoutez simplement ce code après la fonction moveMarker () 

 $("#map_canvas").click(function() { $("#searchTextField").val($(".MapLat").val() +", "+$(".MapLon").val()); });

J'espère, c'est ce dont vous avez besoin 🙂