需要手動啓動谷歌的地方自動完成

Question

我想讓谷歌的地方自動完成與預定義的數據工作，但到目前爲止沒有運氣。

比方說我有這樣的文字「阿拉斯加路南，西雅圖，WA」在預定義這樣的輸入域：

<input id="ev-loc-input" size="60" value="Alaskan Way South, Seattle, WA" /> 

我就可以初始化谷歌自動完成，我想以某種方式觸發它，所以它在頁面加載時查找此地址。

似乎有它「place_changed」是隻有一個記錄事件：

google.maps.event.addListener(events_autocomplete, 'place_changed', function(){.. 

我不能用這一個原因之後的地址查找已經完成被觸發。我找不到可用的活動列表 - 也許任何人都知道？

任何幫助非常感謝！

Answer 1

我終於想通了！我一直在爲此工作2個小時！

無論如何，你需要關注你的輸入元素，但你不能馬上去做。你需要延遲它。

所以，像這樣...

setTimeout(func, 2000); 
function func() { 
    input.focus(); 
    selectFirstResult(); 
} 

這裏是我的代碼，和它的作品。

$(function() { 
    var input = document.getElementById('searchTextField'); 
    input.value = "{{ $user["location"] }}";//I'm using laravel 
    //You won't need the above line if you're already filling in the value of 
    //the input field - I'm going to get this working without the map as well 
    //I'll come back and post that later this weekend 
    var lat = -33.8688, 
    lng = 151.2195, 
    latlng = new google.maps.LatLng(lat, lng), 
    image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';  
    var mapOptions = {   
      center: new google.maps.LatLng(lat, lng),   
      zoom: 13,   
      mapTypeId: google.maps.MapTypeId.ROADMAP   
     }, 
     map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions), 
     marker = new google.maps.Marker({ 
      position: latlng, 
      map: map, 
      icon: image 
     }); 
    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() { 
     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); 
    }); 
    $("input").focusin(function() { 
     $(document).keypress(function (e) { 
      if (e.which == 13) { 
       selectFirstResult(); 
      } 
     }); 
    }); 
    $("input").focusout(function() { 
     if(!$(".pac-container").is(":focus") && !$(".pac-container").is(":visible")) 
      selectFirstResult(); 
    }); 
    function selectFirstResult() { 
     infowindow.close(); 
     $(".pac-container").hide(); 
     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); 
      } 
     }); 
    } 
    function moveMarker(placeName, latlng){ 
     marker.setIcon(image); 
     marker.setPosition(latlng); 
     infowindow.setContent(placeName); 
     infowindow.open(map, marker); 
    } 
    setTimeout(func, 2000); 
    function func() { 
     input.focus(); 
     selectFirstResult(); 
    } 
});