javascript - 如何使用下拉菜单设置Google地方信息自动填充的范围

我在应用程序中使用了Google Places API，并且只能通过下拉菜单设置“自动完成”的范围（纽约市）。我希望能够在下拉菜单中为其他城市进行设置，以便当用户从NYC更改为Chicago时-自动填充功能仅记录来自Chicago的结果。现在，当我选择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>

种子

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)

最佳答案

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() );
  });
}