Google Maps автозаполнения Адресов - Uncaught TypeError: Не удается прочитать свойство «getPlace» неопределенной

Question

setAutocomplete() { 
    this.originPlaceId = null; 
    this.destinationPlaceId = null; 
    this.travelMode = google.maps.TravelMode.WALKING; 
    this.directionsDisplay.setMap(this.map); 

    this.setMapControls(this.map); 

    this.setupClickListener('changemode-walking', google.maps.TravelMode.WALKING); 
    this.setupClickListener('changemode-transit', google.maps.TravelMode.TRANSIT); 
    this.setupClickListener('changemode-driving', google.maps.TravelMode.DRIVING); 

    console.log(this.originInput); 
    this.originAutocomplete = new google.maps.places.Autocomplete(this.originInput); 
    this.originAutocomplete.bindTo('bounds', this.map); 
    console.log(this.originAutocomplete); 
    this.originAutocomplete.addListener('place_changed', function() { 
     console.log(this.originAutocomplete); 
     var place = this.originAutocomplete.getPlace(); 
     console.log("here", place); 
     if (!place.geometry) { 
      window.alert("Autocomplete's returned place contains no geometry"); 
      return; 
     } 
     this.expandViewportToFitPlace(this.map, place); 

     // If the place has a geometry, store its place ID and route if we have 
     // the other place ID 
     this.originPlaceId = place.place_id; 
     this.route(this.directionsService, this.directionsDisplay); 
    }); 

    this.destinationAutocomplete = new google.maps.places.Autocomplete(this.destinationPlaceInput); 
    this.destinationAutocomplete.bindTo('bounds',this.map); 
    this.destinationAutocomplete.addListener('place_changed', function() { 
     var place = this.destinationAutocomplete.getPlace(); 
     if (!place.geometry) { 
      window.alert("Autocomplete's returned place contains no geometry"); 
      return; 
     } 
     this.expandViewportToFitPlace(this.map, place); 

     // If the place has a geometry, store its place ID and route if we have 
     // the other place ID 
     this.destinationPlaceId = place.place_id; 
     this.route(this.directionsService, this.directionsDisplay); 
     //this.getNearbyPlaces(this.destinationPlaceId, 5000); 
    }); 
}; 

setMapControls(map) { 
    this.originInput = document.getElementById('origin-input'); 
    this.destinationPlaceInput = document.getElementById('destination-input'); 
    this.modes = document.getElementById('mode-selector'); 

    map.controls[google.maps.ControlPosition.TOP_LEFT].push(this.originInput); 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(this.destinationPlaceInput); 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(this.modes); 
}; 

<input id="origin-input" class="controls" type="text" force-selection="true" placeholder="Enter an origin location"> 
<input id="destination-input" class="controls" type="text" force-selection="true" placeholder="Enter a destination location"> 
<div id="mode-selector" class="controls"> 
    <input type="radio" name="type" id="changemode-walking" checked="checked"> 
    <label for="changemode-walking">Walking</label> 
    <input type="radio" name="type" id="changemode-transit"> 
    <label for="changemode-transit">Transit</label> 
    <input type="radio" name="type" id="changemode-driving"> 
    <label for="changemode-driving">Driving</label> 
</div> 
<div id="directionsList"></div> 
<div id="map_canvas"></div> 

У меня есть эти функции, которые должны дать мне указания от А до B от Google Maps Места от входа поля (originInput и destinationPlaceInput).

После того как я выбрать вход Я имею эту ошибку в консоли:

Uncaught TypeError: Cannot read property 'getPlace' of undefined

Эта ошибка возникает после того, как «place_changed» триггеров событий.

Answer 1

Внутри place_changed -callback ключевое слово this указывает на объект, который был вызван событием.

так что вы можете просто использовать

var place = this.getPlace(); 

вместо

var place = this.destinationAutocomplete.getPlace();