谷歌地圖的地方自動完成 - 遺漏的類型錯誤：無法讀取的不確定

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> 

財產「getPlace」我有這些功能，這是爲了給我方向A到從輸入谷歌地圖使用B字段（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();