Cách nhập chuỗi tìm kiếm theo chương trình và kích hoạt places_changed cho API Google Maps?

Question

Vì vậy, tôi có một trang tìm kiếm có đầu vào vị trí. Nếu người dùng đến từ một trang khác có truy vấn tìm kiếm, tôi muốn nhập truy vấn này theo cách lập trình vào đầu vào và kích hoạt địa điểm đã thay đổi.

Dưới đây là những gì tôi có cho đến nay:

var searchBox = new google.maps.places.SearchBox(input); 

$('input#location').val(searchQuery); 
google.maps.event.trigger(searchBox, 'places_changed'); 

Tuy nhiên, điều này mang lại cho tôi những lỗi Cannot read property 'length' of undefined cho dòng này của chức năng places_changed tôi:

var places = searchBox.getPlaces(); 

if (places.length == 0) { 
    return; 
} 

Vì vậy, rõ ràng searchBox lợi nhuận undefined cho getPlaces() khi đầu vào đã được điền đầy đủ. Làm sao để tôi có được xung quanh này?

CẬP NHẬT:Here is a JSFiddle để minh họa ý tôi.

Answer 1

Chúng ta hãy nhìn những gì tại công việc của một Hộp Tìm Kiếm:

1. Các loại sử dụng một chuỗi
2. API cung cấp một danh sách với dự đoán
3. Người dùng chọn một dự đoán
4. API thực hiện một Textsearch dựa trên dự đoán được chọn và trả về một danh sách các địa điểm

kết luận: Khi bạn biết searchTerm và bạn không cần chọn dự đoán, chỉ cần bỏ qua các bước 1-3 và chạy trực tiếp TextSearch. Gán mảng đã trả về với các địa điểm cho places -property của SearchBox (số places_changed -event sẽ được kích hoạt tự động vì Hộp tìm kiếm là MVCObject, nơi thay đổi thuộc tính sẽ được quan sát và các sự kiện liên quan sẽ được kích hoạt tự động)

function initialize() { 
 
     var goo = google.maps, 
 
      map = new goo.Map(document.getElementById('map_canvas'), { 
 
      zoom: 1, 
 
      center: new goo.LatLng(0, 0), 
 
      noClear: true 
 
      }), 
 
      input = map.getDiv().querySelector('input'), 
 
      ac = new goo.places.SearchBox(input), 
 
      service = new goo.places.PlacesService(map), 
 
      win = new goo.InfoWindow, 
 
      markers = [], 
 
      request; 
 

 

 
     map.controls[goo.ControlPosition.TOP_CENTER].push(input); 
 

 
     if (input.value.match(/\S/)) { 
 
      request = { 
 
      query: input.value 
 
      }; 
 
      if (ac.getBounds()) { 
 
      request.bounds = ac.getBounds(); 
 
      } 
 
      service.textSearch(request, function(places) { 
 
      //set the places-property of the SearchBox 
 
      //places_changed will be triggered automatically 
 
      ac.set('places', places || []) 
 
      }); 
 
     } 
 

 
     goo.event.addListener(ac, 'places_changed', function() { 
 
      
 
      win.close(); 
 
      
 
      //remove previous markers 
 
      while (markers.length) { 
 
      markers.pop().setMap(null); 
 
      } 
 

 
      //add new markers 
 
      (function(places) { 
 
      var bounds = new goo.LatLngBounds(); 
 
      for (var p = 0; p < places.length; ++p) { 
 
       markers.push((function(place) { 
 
       bounds.extend(place.geometry.location); 
 
       var marker = new google.maps.Marker({ 
 
        map: map, 
 
        position: place.geometry.location 
 
        }), 
 
        content = document.createElement('div'); 
 
       content.appendChild(document.createElement('strong')); 
 
       content.lastChild.appendChild(document.createTextNode(place.name)); 
 
       content.appendChild(document.createElement('div')); 
 
       content.lastChild.appendChild(document.createTextNode(place.formatted_address)); 
 
       goo.event.addListener(marker, 'click', function() { 
 
        win.setContent(content); 
 
        win.open(map, this); 
 
       }); 
 
       return marker; 
 
       })(places[p])); 
 
      }; 
 
      if (markers.length) { 
 
       if (markers.length === 1) { 
 
       map.setCenter(bounds.getCenter()); 
 
       } else { 
 
       map.fitBounds(bounds); 
 
       } 
 
      } 
 
      })(this.getPlaces()); 
 
     }); 
 
     } 
 
     google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0 
 
} 
 
strong{ 
 
font-weight:bold; 
 
}

<div id="map_canvas"> 
 
    <input value="berlin"> 
 
</div> 
 
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places"></script>