将 Google 地图 SearchBox 结果传递给路线服务

Question

在阅读了 SearchBox 类、Places 库（包括 AutoComplete 类和 Directions 服务）的文档后，我无法弄清楚如何将用户从 SearchBox 中选择的地址传递给 Directions 服务以绘制地图。地图和标记正确显示，SearchBox 正确显示和运行。但是，在“place_change”事件中，什么都没有发生。我的代码：

var rawlatitude = <?php echo $loc_lat; ?>;
var rawlongitude = <?php echo $loc_long; ?>;
var latitude = parseFloat(rawlatitude);
var longitude = parseFloat(rawlongitude);
var latlong = new google.maps.LatLng(latitude,longitude);

google.maps.event.addDomListener(window, 'load',initMap(latitude,longitude));

function initMap(lat,lng) {
    // instantiate directions service object
    var directionsService = new google.maps.DirectionsService;
    // create map
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 16,
        center: latlong
    });
    // add marker
    var marker = new google.maps.Marker({
        position: latlong,
        map: map
    });
    // put address search box into map
    var input = document.getElementById('pac-input');
    var searchBox = new google.maps.places.SearchBox(input);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
    // create directions renderer and bind it to map
    var directionsDisplay = new google.maps.DirectionsRenderer({map: map});
    // listen to and respond to address search
    var onChangeHandler = function() {
        var location = searchBox.getPlaces();
        var start = location.place_id;
        calculateAndDisplayRoute(directionsDisplay, directionsService, map, start);
    };
    google.maps.event.addListener(searchBox, 'place_change', onChangeHandler);
}

function calculateAndDisplayRoute(directionsDisplay, directionsService, map, start) {
    directionsService.route({
        origin: start,
        destination: latlong,
        travelMode: google.maps.TravelMode.DRIVING
    },  function(response, status) {
            if(status === google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            } else {
                window.alert('Directions request failed due to ' + status);
            }
    });
}

Answer 1

正如莫勒博士在他的评论中所说，

SearchBox 没有 place_changed-event，它是 Autocomplete 的事件。 SearchBox 的事件称为places_changed。

另请注意，SearchBox.getPlaces() 返回一个包含地点的数组

working fiddle

工作代码 sn-p：

var rawlatitude = 40.7127837;
var rawlongitude = -74.0059413;
var latitude = parseFloat(rawlatitude);
var longitude = parseFloat(rawlongitude);
var latlong = new google.maps.LatLng(latitude, longitude);
var viewport = {
  "south": 40.4960439,
  "west": -74.2557349,
  "north": 40.91525559999999,
  "east": -73.7002721
};

google.maps.event.addDomListener(window, 'load', function() {
  initMap(40.735657, -74.1723667);
});


function initMap(lat, lng) {
  // instantiate directions service object
  var directionsService = new google.maps.DirectionsService;
  // create map
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: latlong
  });
  // add marker
  var marker = new google.maps.Marker({
    position: latlong,
    draggable: true,
    map: map
  });
  // put address search box into map
  var input = document.getElementById('pac-input');
  var searchBox = new google.maps.places.SearchBox(input, {
    bounds: viewport
  });
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
  // create directions renderer and bind it to map
  var directionsDisplay = new google.maps.DirectionsRenderer({
    map: map
  });
  // listen to and respond to address search
  var onChangeHandler = function() {
    var locations = searchBox.getPlaces();

    var start = locations[0].place_id;
    var bounds = new google.maps.LatLngBounds();
    bounds.extend(latlong);
    bounds.extend(locations[0].geometry.location);
    map.fitBounds(bounds);
    var marker = new google.maps.Marker({
      position: locations[0].geometry.location,
      map: map,
      title: locations[0].name
    })
    calculateAndDisplayRoute(directionsDisplay, directionsService, map, start);
  };
  google.maps.event.addListener(searchBox, 'places_changed', onChangeHandler);
}

function calculateAndDisplayRoute(directionsDisplay, directionsService, map, start) {
  directionsService.route({
    origin: {
      placeId: start
    },
    destination: {
      location: latlong
    },
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<input id="pac-input" />
<div id="map"></div>