在我尝试实施Google地图中包含的自动填充地图时，我编写了以下代码：
import { Component , ViewChild , ElementRef} from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Geolocation ,GeolocationOptions ,Geoposition ,PositionError } from '@ionic-native/geolocation';
declare var google ;
@IonicPage()
@Component({
selector: 'page-test',
templateUrl: 'test.html',
})
export class TestPage {
@ViewChild('map') mapElement : ElementRef;
map: any;
@ViewChild('origion-input') originInputElement: ElementRef;
originPlaceId: any;
@ViewChild('destination-input') destinationInputElement: ElementRef;
destinationPlaceId: any;
@ViewChild('mode-selector') modeElement: ElementRef;
travelMode: any;
directionsService : any ;
directionsDisplay : any ;
lat : any
lng : any
Auto : any
constructor(public navCtrl: NavController, public navParams: NavParams, private geolocation: Geolocation) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad TestPage');
}
ngOnInit(){
let latLng = new google.maps.LatLng(this.lat, this.lng);
let mapOption = {
mapTypeControl: false,
center: latLng,
zoom: 13
}
this.map = new google.maps.Map(this.mapElement.nativeElement , mapOption);
// here the error in next line =>
this.Auto = new google.maps.AutocompleteDirectionsHandler(this.map);
}
AutocompleteDirectionsHandler(map) {
this.map = map;
this.originPlaceId = null;
this.destinationPlaceId = null;
this.travelMode = 'WALKING';
let originInput = this.originInputElement ;
let destinationInput = this.destinationInputElement ;
let modeSelector = this.modeElement ;
this.directionsService = new google.maps.DirectionsService;
this.directionsDisplay = new google.maps.DirectionsRenderer;
this.directionsDisplay.setMap(map);
let originAutocomplete = new google.maps.places.Autocomplete(
originInput, {placeIdOnly: true});
let destinationAutocomplete = new google.maps.places.Autocomplete(
destinationInput, {placeIdOnly: true});
this.setupClickListener('changemode-walking', 'WALKING');
this.setupClickListener('changemode-transit', 'TRANSIT');
this.setupClickListener('changemode-driving', 'DRIVING');
this.setupPlaceChangedListener(originAutocomplete, 'ORIG');
this.setupPlaceChangedListener(destinationAutocomplete, 'DEST');
this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(originInput);
this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(destinationInput);
this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(modeSelector);
}
// Sets a listener on a radio button to change the filter type on Places
// Autocomplete.
//AutocompleteDirectionsHandler.prototype.
setupClickListener(id, mode) {
let radioButton = document.getElementById(id);
let me = this;
radioButton.addEventListener('click', function() {
me.travelMode = mode;
me.route();
});
}
//AutocompleteDirectionsHandler.prototype.
setupPlaceChangedListener(autocomplete, mode) {
let me = this;
autocomplete.bindTo('bounds', this.map);
autocomplete.addListener('place_changed', function() {
let place = autocomplete.getPlace();
if (!place.place_id) {
window.alert("Please select an option from the dropdown list.");
return;
}
if (mode === 'ORIG') {
me.originPlaceId = place.place_id;
} else {
me.destinationPlaceId = place.place_id;
}
me.route();
});
}
//AutocompleteDirectionsHandler.prototype.
route() {
if (!this.originPlaceId || !this.destinationPlaceId) {
return;
}
let me = this;
this.directionsService.route({
origin: {'placeId': this.originPlaceId},
destination: {'placeId': this.destinationPlaceId},
travelMode: this.travelMode
}, function(response, status) {
if (status === 'OK') {
this.directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
}
但它给我一个关于这一行的错误
this.Auto = new google.maps.AutocompleteDirectionsHandler(this.map);
它给我的错误是：
ERROR Error: Uncaught (in promise): TypeError: google.maps.AutocompleteDirectionsHandler is not a constructor
TypeError: google.maps.AutocompleteDirectionsHandler is not a constructor
at TestPage.webpackJsonp.460.TestPage.ngOnInit (test.ts:51)
at checkAndUpdateDirectiveInline (core.js:12095)
at checkAndUpdateNodeInline (core.js:13598)
at checkAndUpdateNode (core.js:13541)
at debugCheckAndUpdateNode (core.js:14413)
at debugCheckDirectivesFn (core.js:14354)
at Object.eval [as updateDirectives] (TestPage_Host.ngfactory.js? [sm]:1)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:14339)
at checkAndUpdateView (core.js:13508)
at callWithDebugContext (core.js:14740)
at TestPage.webpackJsonp.460.TestPage.ngOnInit (test.ts:51)
at checkAndUpdateDirectiveInline (core.js:12095)
at checkAndUpdateNodeInline (core.js:13598)
at checkAndUpdateNode (core.js:13541)
at debugCheckAndUpdateNode (core.js:14413)
at debugCheckDirectivesFn (core.js:14354)
at Object.eval [as updateDirectives] (TestPage_Host.ngfactory.js? [sm]:1)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:14339)
at checkAndUpdateView (core.js:13508)
at callWithDebugContext (core.js:14740)
at c (polyfills.js:3)
at Object.reject (polyfills.js:3)
at Tab.NavControllerBase._fireError (nav-controller-base.js:223)
at Tab.NavControllerBase._failed (nav-controller-base.js:216)
at nav-controller-base.js:263
at t.invoke (polyfills.js:3)
at Object.onInvoke (core.js:4629)
at t.invoke (polyfills.js:3)
at r.run (polyfills.js:3)
at polyfills.js:3
如果我删除导致错误的行，那么代码将不会出错但也无法正常运行 当我删除错误行时，结果就是地图没有出现在视图中
html代码是：
<ion-content padding>
<input id="origin-input" class="controls" type="text"
placeholder="Enter an origin location">
<input id="destination-input" class="controls" type="text"
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 #map id="map"></div>
</ion-content>
我应该怎样解决这个问题？