谷歌地圖自動完成地址點擊

Question

我有一個谷歌地圖和他們的自動完成文本框之一，用戶開始輸入，地址顯示在下拉列表中，然後地圖放大到最終選定的地圖。到目前爲止，我對我的所作所爲非常滿意。問題在於，用戶必須點擊列表中的地址才能使其工作。

我想要的也是這個選項：當用戶在鍵盤上點擊'ENTER'時，即使他們沒有完全填充auto_complete框，列表中的第一個地址也會自動選中，地圖放大對此。

我玩弄

$(autocomplete).trigger("click"); 

，但我無法修復它。所以，如果你能給我一隻手，我會很感激......我的代碼是：

<script type="text/javascript"> 
    function initialize_google_maps() { 



    var midOfIreland = new google.maps.LatLng(53.252069, -7.860718); 
    var myOptions = { 
     zoom: 7, 
     center: midOfIreland, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, // ROADMAP, SATELLITE, HYBRID 
     streetViewControl: false 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    var input = document.getElementById('address_autocomplete'); 
    var options = { 
     types: ['geocode'] 
    }; 

    autocomplete = new google.maps.places.Autocomplete(input, options); 
    autocomplete.bindTo('bounds', map); 
    // $(autocomplete).trigger("click"); 

    var contentstring = $('#info_window').html(); 


var infowindow = new google.maps.InfoWindow({content: contentstring, width:1, height:1}); 
// for the 'x', to close the infoWindow, we give it the same behaviour as the 'No' link, in the infoWindow 
google.maps.event.addListener(infowindow, 'closeclick', function() { 
    $(".map-no-link").trigger("click"); 
}); 


    var marker = new google.maps.Marker({ 
     map: map 
    }); 



    google.maps.event.addListener(autocomplete, 'place_changed', function() { 
     var place = autocomplete.getPlace(); 
     if (place.geometry.viewport) { 
      map.fitBounds(place.geometry.viewport); 
     } else { 
      map.setCenter(place.geometry.location); 
      map.setZoom(11); 
     } 
     marker.setPosition(place.geometry.location); 
     $('#user_lat').val(place.geometry.location.lat()); 
     $('#user_lng').val(place.geometry.location.lng()); 
     $('#changed').val('1'); 

    // infowindow.setContent(place.name); 
     infowindow.open(map, marker); 
    }); 

    <% if current_user.address and current_user.lat %> 
     var currentlatlng = new google.maps.LatLng(<%= current_user.lat %>, <%= current_user.lng %>); 
     var marker = new google.maps.Marker({map: map, position: currentlatlng}); 
     map.setCenter(currentlatlng); 
     map.setZoom(11); 
    <% end %> 

    } 

    $(function() { 
     initialize_google_maps(); 
    }); 

</script> 

Answer 1

檢查這個jsFiddle。你需要做的是聽按Enter鍵時，從自動完成容器中獲取第一項，對其進行地理編碼並處理結果。

$(document).keypress(function (e) { 
    if (e.which == 13) { 
    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); 
     } 
    }); 
    } 
}); 

Answer 2

這是我最終使用的代碼，它的工作原理：

<script type="text/javascript"> 
    var pac_input = document.getElementById('address_autocomplete'); 

    (function pacSelectFirst(input){ 
    // store the original event binding function 
    var _addEventListener = (input.addEventListener) ? input.addEventListener : input.attachEvent; 

    function addEventListenerWrapper(type, listener) { 
     // Simulate a 'down arrow' keypress on hitting 'return' when no pac suggestion is selected, 
     // and then trigger the original listener. 
     if (type == "keydown") { 
     var orig_listener = listener; 
     listener = function (event) { 
      var suggestion_selected = $(".pac-item.pac-selected").length > 0; 
      if (event.which == 13 && !suggestion_selected) { 
      event.preventDefault(); 
      var simulated_downarrow = $.Event("keydown", {keyCode:40, which:40}) 
      orig_listener.apply(input, [simulated_downarrow]); 
      } 

      orig_listener.apply(input, [event]); 
     }; 
     } 

     // add the modified listener 
     _addEventListener.apply(input, [type, listener]); 
    } 

    if (input.addEventListener) 
     input.addEventListener = addEventListenerWrapper; 
    else if (input.attachEvent) 
     input.attachEvent = addEventListenerWrapper; 

    })(pac_input); 

    function initialize_google_maps() { 
    var midOfIreland = new google.maps.LatLng(53.252069, -7.860718); 
    var myOptions = { 
     zoom: 7, 
     center: midOfIreland, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, // ROADMAP, SATELLITE, HYBRID 
     streetViewControl: false 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    var options = { 
     types: ['geocode'] 
    }; 

    autocomplete = new google.maps.places.Autocomplete(pac_input, options); 
    autocomplete.bindTo('bounds', map); 
    // $(autocomplete).trigger("click"); 

    var contentstring = $('#info_window').html(); 

    var infowindow = new google.maps.InfoWindow({content: contentstring, width:1, height:1}); 
    // for the 'x', to close the infoWindow, we give it the same behaviour as the 'No' link, in the infoWindow 
    google.maps.event.addListener(infowindow, 'closeclick', function() { 
     $(".map-no-link").trigger("click"); 
    }); 

    var marker = new google.maps.Marker({ 
     map: map 
    }); 

    google.maps.event.addListener(autocomplete, 'place_changed', function() { 
     var place = autocomplete.getPlace(); 
     if (place.geometry.viewport) { 
      map.fitBounds(place.geometry.viewport); 
     } else { 
      map.setCenter(place.geometry.location); 
      map.setZoom(11); 
     } 

     marker.setPosition(place.geometry.location); 
     $('#user_lat').val(place.geometry.location.lat()); 
     $('#user_lng').val(place.geometry.location.lng()); 
     $('#changed').val('1'); 

     //infowindow.setContent(place.name); 
     infowindow.open(map, marker); 
    }); 

    <% if current_user.address and current_user.lat %> 
     var currentlatlng = new google.maps.LatLng(<%= current_user.lat %>, <%= current_user.lng %>); 
     var marker = new google.maps.Marker({map: map, position: currentlatlng}); 
     map.setCenter(currentlatlng); 
     map.setZoom(11); 
    <% end %> 

    } 

    $(function() { 
     initialize_google_maps(); 
    }); 
</script>