javascript - 如何以编程方式输入搜索字符串并触发 Google Maps API 的 places_changed？

Question

所以我有一个带有位置输入的搜索页面。如果用户来自另一个带有搜索查询的页面，我想以编程方式将此查询输入到输入中并触发位置更改。

这是我目前所拥有的:

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

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

但是，对于我的 places_changed 函数的这一行，这给了我错误 Cannot read property 'length' of undefined:

var places = searchBox.getPlaces();

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

很明显，当以编程方式填充输入时，searchBox 为 getPlaces() 返回 undefined。我该如何解决这个问题？

更新: Here is a JSFiddle举例说明我的意思。

Answer 1

让我们来看看搜索框的工作流程:

1. 用户输入一个字符串
2. API 提供了一个包含预测的列表
3. 用户选择一个预测
4. API 根据所选预测执行文本搜索并返回地点列表

结论:当您知道 searchTerm 并且不需要选择预测时，只需跳过步骤 1-3 并直接运行 TextSearch。将带有位置的返回数组分配给 SearchBox 的 places 属性(places_changed 事件将自动触发，因为 SearchBox 是一个MVCObject ，会观察属性的变化，并自动触发相关事件)

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>