Google Maps Places Autocomplete - 未捕获TypeError：无法读取未定义的属性'getPlace' [英] Google Maps Places Autocomplete - Uncaught TypeError: Cannot read property 'getPlace' of undefined

问题描述

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返回的地方不包含几何图形）;
return;
}
this.expandViewportToFitPlace（this.map，place）;

//如果这个地方有一个几何图形，如果我们有
//则存储它的地点ID和路线其他地方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返回的地方不包含几何图形）;
return;
}
this.expandViewportToFitPlace（this.map，place）;

//如果这个地方有一个几何图形，如果我们有
//另一个地方存储它的地点ID和路线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-inputclass =controlstype =textforce-selection =trueplaceholder =输入原点位置>
< div id =mode-selectorclass =controls>
< input type =radioname =typeid =changemode-walkingchecked =checked>
< label for =changemode-walking>步行< / label>
< input type =radioname =typeid =changemode-transit>
< label for =changemode-transit> Transit< / label>
< input type =radioname =typeid =changemode-driving>
< label for =changemode-driving>驾驶< / label>
< / div>
< div id =directionsList>< / div>
< div id =map_canvas>< / div>


我有这些功能可以让我从Google地图位置的A到B方向输入字段（originInput和destinationPlaceInput）。

在我选择一个输入后，我在控制台中发现了这个错误：

未捕获TypeError：无法读取未定义的属性'getPlace'

在place_changed事件触发后抛出此错误。

$ place_changed -callback关键字这个解决方案

指向已触发事件的对象。

因此您可以简单地使用

  var place = this.getPlace（）; 
  

而不是

  var place = this.destinationAutocomplete.getPlace（）; 
  

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>

I have these functions which are supposed to give me the directions A to B from Google Maps Places from the input fields (originInput and destinationPlaceInput).

After I select an input I have this error in console:

Uncaught TypeError: Cannot read property 'getPlace' of undefined

This error is thrown after the "place_changed" event triggers.

解决方案

Inside the place_changed-callback the keyword this points to the object which has been triggered the event.

so you may simply use

var place = this.getPlace();

instead of

var place = this.destinationAutocomplete.getPlace();

这篇关于Google Maps Places Autocomplete - 未捕获TypeError：无法读取未定义的属性'getPlace'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！