Uzyskaj adres lokalizacji z szerokości i długości geograficznej na mapach google

Question

Chcę po kliknięciu mapy google i uzyskaniu szerokości i długości geograficznej uzyskać lokalizację od nich i umieścić go (adres) w złożonym input#searchTextField. Co ja robię?

Próbowałem jak, ale nie działa dla mnie:

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

Ok, więc najpierw potrzebujesz odwrotnego geokodowania, a nie regularnego geokodowania, ponieważ przechodzisz od szerokości/długości geograficznej do adresu, a nie odwrotnie (patrz reference). Po drugie, twój kluczowy słuchacz nigdy nie zrobiłby niczego, ponieważ prawie natychmiast stwierdza, że ​​return false; w tym przypadku prawdopodobnie chcesz event.stopPropogation(). Ponadto mapy google przechwytują kliknięcia myszą na większej głębokości w drzewie DOM niż document, więc zdarzenie to nigdy nie zostanie wysłuchane tak wysoko.

Zrobiłem więc zmianę geokody na odwrotny geokod, a także przeniesienie kodu do odbiornika dokumentów do google listener. Jeśli chcesz zachować zachowanie dodawanego detektora, możesz po prostu utworzyć nowy obiekt nasłuchujący na obiekcie mapy. Oto working jsfiddle demonstrating these changes, mam nadzieję, że to pomaga.

Answer 2

Spójrz na api deweloperów GMap. dla tematu Reverse Geocoding (Address Lookup). Dostaniesz odpowiedź.

Answer 3

Wystarczy dodać ten kod po moveMarker function()

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

Hope, to jest to, czego potrzeba :)