javascript - 如何使用下拉菜单为 Google Places Autocomplete 设置边界

Question

我在我的应用程序中使用 Google Places API，并且能够为我的第一选择(纽约市)设置下拉菜单的自动完成范围。我希望能够在下拉列表中为我的其他城市设置它，以便当用户从纽约更改为芝加哥时 - 自动完成仅注册来自芝加哥的结果。现在，当我选择 Chicago - console.log 注册 Chicago LatLng 但自动完成仅显示 NYC 结果。我在下面列出了我的代码，非常感谢对此提供的任何帮助。我觉得它需要一个事件监听器来传递更改，但我的所有努力尚未成功。

Autocomplete.js

 var map, places, infoWindow;
  var markers = [];
  var autocomplete;      
  ;

   function cafeInitMap(lat, lng,latnorth, lngeast, store) {
    map = new google.maps.Map(document.getElementById('map'), {
      center: new google.maps.LatLng(40.751,-73.99),
      zoom: 11,          
      mapTypeControl: false,
      panControl: false,
      zoomControl: false,
      streetViewControl: false
    });

    infoWindow = new google.maps.InfoWindow({
      content: document.getElementById('info-content')
    });

    var defaultBounds = new google.maps.LatLngBounds(
              new google.maps.LatLng(lat, lng),
              new google.maps.LatLng(latnorth, lngeast));

    // Create the autocomplete object and associate it with the UI input control.
    // Restrict the search to the default country, and to place type "cities".
    autocomplete = new google.maps.places.Autocomplete(
        /** @type {!HTMLInputElement} */ (
            document.getElementById('autocomplete')), {
                bounds: defaultBounds,
                strictBounds: true
        });
    places = new google.maps.places.PlacesService(map);
}
$(document).ready(function() {
  $("#cafe_city_id").on('change', hanldeGoogleMapDraw);
  function hanldeGoogleMapDraw(e) {
var $place = $("#cafe_city_id"),

    lat,
    latnorth,
    searchType = '',
    lng,
    lngeast;

if($place.find(':selected').length === 0) return;   

lat = $place.find(':selected').data('south');
lng = $place.find(':selected').data('west');    
latnorth = $place.find(':selected').data('north');
lngeast = $place.find(':selected').data('east');
$('#search-results-dropdown').html('');
cafeInitMap(lat, lng,latnorth, lngeast);
}
});

Automcomplete.html.erb

  <div class="col-md-6">
<div class="field">
<%= f.label :city %><br>
<select class="form-control" name="cafe[city_id]" id="cafe_city_id">
    <option></option>
    <% City.all.each do |city| %>
        <option value="<%= city.id %>" data-south="<%= city.latitude %>" data-west="<%= city.longitude %>" data-north="<%= city.latitudenorth  %>" data-east="<%= city.longitudeeast %>" >    <%= city.name %></option>
    <% end %>
</select>
</div>
</div>
<div class="col-md-6">   
   <div id="locationField">
  <input id="autocomplete" placeholder="Type a Location" type="text" />
</div>

Seeds.rb

City.destroy_all
nyc = City.create!(name:"New York City", latitude: 40.495992, longitude: -74.029988, latitudenorth: 40.915568, longitudeeast: -73.699215)
sf = City.create!(name:"San Francisco", latitude: 37.7749295, longitude: -122.4194, latitudenorth: 37.7152613, longitudeeast: -122.5206928)
austin = City.create!(name:"Austin", latitude: 30.267153, longitude: -97.7430608, latitudenorth: 30.3074624, longitudeeast: -98.0335911)
la = City.create!(name:"Los Angeles", latitude: 34.0522342, longitude: -118.2436849, latitudenorth: 34.0201613, longitudeeast: -118.6919205)

Answer 1

function cafeInitMap(){
  var map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(40.751,-73.99),
    zoom: 11,          
    mapTypeControl: false,
    panControl: false,
    zoomControl: false,
    streetViewControl: false
  });
  var infoWindow = new google.maps.InfoWindow({
    content: document.getElementById('info-content')
  });
  var defaultBounds = function(){
    // Use the first empty options tag for the default location or provide 
    // a lat lng literal
    return $(this).find('option:selected').data() || $(this).find('option:first').data();
  }
  var autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'), {
    bounds: defaultBounds(),
    strictBounds: true
  });
  var places = google.maps.places.PlacesService(map);

  // Set an event listener on the select and
  // use it to update the bounds of the autocomplete
  $(document).on('change','#cafe_city_id', function(){
    var lat_lng = $(this).find('option:selected').data();
    autocomplete.setBounds(lat_lng);
    // you may need to trigger a change event as well 
    // for google.maps.places.Autocomplete to fetch new results
    // $('#autocomplete').trigger('change');
  });
  // If you want to update the map as well then you can set a listener so 
  // that the map bounds conform to the autocomplete when the data is loaded:
  google.maps.event.addListener(autocomplete, 'place_changed', function () {
    map.setBounds( autocomplete.getBounds() );
  });
}