Google地方信息更新地图并剖析自动完成字段

Question

我想将我的Google Places自动完成字段分解为单独的字段，并在完成自动完成后动态更新地图。因此，此代码“窃取”了“ places_changed”侦听器。如何使它们一起工作？

var placeSearch, autocomplete;
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name'
};

function initAutocomplete() {
  autocomplete = new google.maps.places.Autocomplete(
    /** @type {!HTMLInputElement} */
    (document.getElementById('autocomplete')), {
      types: ['geocode']
    });
  autocomplete.addListener('place_changed', fillInAddress);

  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -33.8688,
      lng: 151.2195
    },
    zoom: 13,
    mapTypeId: 'roadmap'
  });

  var input = document.getElementById('autocomplete');
  var searchBox = new google.maps.places.SearchBox(input);

  map.addListener('bounds_changed', function() {
    searchBox.setBounds(map.getBounds());
  });

  var markers = [];

  searchBox.addListener('places_changed', function() {
    var places = searchBox.getPlaces();

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

    markers.forEach(function(marker) {
      marker.setMap(null);
    });
    markers = [];

    var bounds = new google.maps.LatLngBounds();
    places.forEach(function(place) {
      if (!place.geometry) {
        console.log("Returned place contains no geometry");
        return;
      }
      var icon = {
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25)
      };

      markers.push(new google.maps.Marker({
        map: map,
        icon: icon,
        title: place.name,
        position: place.geometry.location
      }));

      if (place.geometry.viewport) {
        bounds.union(place.geometry.viewport);
      } else {
        bounds.extend(place.geometry.location);
      }
    });
    map.fitBounds(bounds);
  });
}

function fillInAddress() {
  var place = autocomplete.getPlace();
  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}

function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}

<div class="col-lg-8 col-md-8 col-sm-6 col-xs-12">
  <div class="form-group field-autocomplete">
    <input type="text" id="autocomplete" class="form-control" name="g_place" placeholder="Lookup Address" onFocus="geolocate()">
  </div>
</div>

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
  <div class="form-group field-country">
    <input type="text" id="country" class="form-control" name="g_country" placeholder="Country">
  </div>
</div>

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
  <div class="form-group field-street_number">
    <input type="text" id="street_number" class="form-control" name="g_address" placeholder="Listing Address">
  </div>
</div>

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
  <div class="form-group field-listing-g_unit">
    <input type="text" id="listing-g_unit" class="form-control" name="g_unit" placeholder="Suite / Unit #">
  </div>
</div>

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
  <div class="form-group field-route">
    <input type="text" id="route" class="form-control" name="g_street" placeholder="Street">
  </div>
</div>

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
  <div class="form-group field-locality">
    <input type="text" id="locality" class="form-control" name="g_city" placeholder="City">
  </div>
</div>

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
  <div class="form-group field-administrative_area_level_1">
    <input type="text" id="administrative_area_level_1" class="form-control" name="g_state" placeholder="State">
  </div>
</div>

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
  <div class="form-group field-postal_code">
    <input type="text" id="postal_code" class="form-control" name="g_zip" placeholder="Zip">
  </div>
</div>

<div id="map" style="width:100%;height:300px;"></div>

<script src="https://maps.googleapis.com/maps/api/js?key=MyKey&libraries=places&callback=initAutocomplete" async defer></script>

如何组合它们以使字段基于自动填充字段自动填充并让地图显示位置？