從谷歌地圖經緯度獲取位置地址

Question

我想要點擊谷歌地圖後，獲取緯度和經度從他們的位置的地方，並把它（地址）在input#searchTextField。我該怎麼辦？

我想作爲，但不爲我工作：

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); 
    } 
});​ 

Answer 1

好的，首先您需要反向地理編碼，而不是常規地理編碼，因爲您將從經度/緯度轉到地址而不是反過來（請參閱reference）。其次，你的關鍵聽衆永遠不會做任何事情，因爲它幾乎立即聲明return false;在這種情況下，您可能需要event.stopPropogation()。此外，谷歌地圖將攔截你的鼠標在DOM樹的深度比在document更深的點擊，所以事件將永遠不會被高度傾聽。

因此，我所做的是將您的地理編碼轉換爲反向地理編碼，並將文檔偵聽器中的代碼移動到Google偵聽器中。如果您想保留添加在焦點上的偵聽器的行爲，則可以簡單地在地圖對象上創建一個新的偵聽器。這是一個working jsfiddle demonstrating these changes，希望這可以幫助。

Answer 2

看看在GMAP開發API。 專題Reverse Geocoding (Address Lookup)。 你會得到你的答案。

Answer 3

只需添加該代碼後moveMarker（）函數

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

希望，這是你需要什麼:)