从谷歌地图中的纬度和经度获取位置地址答案

【问题标题】：Get location address from Latitude and Longitude in google maps从谷歌地图中的纬度和经度获取位置地址
【发布时间】：2012-12-27 07:33:58
【问题描述】：

我想在点击谷歌地图并获取纬度和经度后从他们那里获取位置并将其（地址）放入归档 input#searchTextField。我该怎么办？

我试过了，但不适合我：

演示： 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);
     }
 });

【问题讨论】：

标签： javascript jquery google-maps

【解决方案1】：

好的，首先您需要反向地理编码，而不是常规地理编码，因为您要从纬度/经度进入地址，而不是相反（请参阅reference）。其次，您的主要听众永远不会做任何事情，因为它几乎立即声明return false；在这种情况下，您可能需要event.stopPropogation()。此外，谷歌地图将在 DOM 树中比document 更深地拦截您的鼠标点击，因此无论如何该事件都不会被高度监听。

所以我所做的是将您的地理编码更改为反向地理编码，并将文档侦听器中的代码移动到谷歌侦听器中。如果您想保留在焦点上添加的侦听器的行为，您可以简单地在地图对象上创建一个新的侦听器。这是working jsfiddle demonstrating these changes，希望对您有所帮助。

【讨论】：

它真的很棒，但是谷歌地图不显示用户的位置，我如何跟踪用户的位置？？？

【解决方案2】：

看看 gmap 开发者 api。主题Reverse Geocoding (Address Lookup)。你会得到答案的。

【讨论】：

@jennifer Jolie：为什么否定我只给出我所知道的！

【解决方案3】：

只需在 moveMarker() 函数后添加此代码

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

希望，这就是你所需要的 :)

【讨论】：