Angular 错误：this.infoWindowFunction不是一个函数
我只是尝试用参数进行函数调用，但是，我遇到了主题中提到的错误。我的函数声明和调用应该是可以的，如果你看到我如何做下面 我尝试了以下方法，但没有任何效果：Angular 错误：this.infoWindowFunction不是一个函数,angular,typescript,Angular,Typescript,我只是尝试用参数进行函数调用，但是，我遇到了主题中提到的错误。我的函数声明和调用应该是可以的，如果你看到我如何做下面 我尝试了以下方法，但没有任何效果： infoWindowFunction=函数（infoWindow、内容、标记、映射）{…} infoWindowFunction（infoWindow、内容、标记、映射）{…} infoWindowFunction=（infoWindow、内容、标记、映射）=>{…} 甚至下面的更改似乎是修复方法，因为我不再有错误，只是没有按预期工作： 以
- infoWindowFunction=函数（infoWindow、内容、标记、映射）{…}
- infoWindowFunction（infoWindow、内容、标记、映射）{…}
- infoWindowFunction=（infoWindow、内容、标记、映射）=>{…}
- 甚至下面的更改似乎是修复方法，因为我不再有错误，只是没有按预期工作：
import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-directions',
templateUrl: './directions.component.html',
styleUrls: ['./directions.component.css']
})
export class DirectionsComponent implements OnInit {
directionsForm: FormGroup;
map: google.maps.Map;
errMess: string;
markerArray = [];
infowindow = new google.maps.InfoWindow;
directionsService = new google.maps.DirectionsService();
directionsRenderer = new google.maps.DirectionsRenderer({ suppressMarkers: true });
@ViewChild('dform', { static: false }) directionsFormDirective;
@ViewChild('gmap') gmapElement: any;
constructor(private fb: FormBuilder,//FormBuilders is an array of groups(i.e. Name, email, Address (new form group as address can be separated further like state, city, etc.))
) {
this.createForm();
}
ngOnInit() {
var mapOptions = {
center: new google.maps.LatLng(18.5793, 73.8143),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map(this.gmapElement.nativeElement, mapOptions);
this.directionsRenderer.setMap(this.map);
}
formErrors = {
'origin': '',
'destination': ''
};
validationMessages = {
'origin': {
'required': 'Please provide origin address'
},
'destination': {
'required': 'Please provide destination address'
}
};
createForm() {
this.directionsForm = this.fb.group({
origin: ['', [Validators.required]],
destination: ['', [Validators.required]]
});
this.directionsForm.valueChanges
.subscribe(data => this.onValueChanged(data));
this.onValueChanged(); // (re)set validation messages now
}
onValueChanged(data?: any) { //data parameter is optional by use of "?"
if (!this.directionsForm) { return; }
const form = this.directionsForm;
for (const field in this.formErrors) {
if (this.formErrors.hasOwnProperty(field)) {
// clear previous error message (if any)
this.formErrors[field] = '';
const control = form.get(field);
if (control && control.dirty && !control.valid) {
const messages = this.validationMessages[field];
for (const key in control.errors) {
if (control.errors.hasOwnProperty(key)) { //condition unnecessary?
this.formErrors[field] += messages[key] + ' ';
}
}
}
}
}
}
onSubmit() {
this.calculateAndDisplayRoute(this.directionsService, this.directionsRenderer, this.map, this.infowindow);
}
calculateAndDisplayRoute(directionsService, directionsRenderer, map, infowindow) {
directionsService.route(
{
origin: { query: this.directionsForm.get('origin').value },
destination: { query: this.directionsForm.get('destination').value },
travelMode: 'DRIVING'
},
function (response, status) {
if (status === 'OK') {
//console.log(response);
directionsRenderer.setDirections(response);
var infoWindow = new google.maps.InfoWindow();
//this.showSteps(response, infowindow, map, this.markerArray);
//---------------------Origin Marker----------------------------
var marker = new google.maps.Marker({
map: map,
position: response.routes[0].legs[0].start_location,
title: response.routes[0].legs[0].start_address
});
var content =
'Formatted Address: ' + response.routes[0].legs[0].start_address +
'<br/>Location Type: ' + response.geocoded_waypoints[0].types +
'<br/>Place ID: ' + response.geocoded_waypoints[0].place_id;
this.infoWindowFunction( infoWindow,content, map, marker);
//---------------------Destination Marker----------------------------
var marker = new google.maps.Marker({
map: map,
position: response.routes[0].legs[0].end_location,
title: response.routes[0].legs[0].end_address
});
var content =
'Formatted Address: ' + response.routes[0].legs[0].end_address +
'<br/>Location Type: ' + response.geocoded_waypoints[1].types +
'<br/>Place ID: ' + response.geocoded_waypoints[1].place_id;
this.infoWindowFunction( infoWindow,content, map, marker);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
infoWindowFunction=( infoWindow, content, marker, map) => {
marker.addListener("click", function (e) {
infoWindow.setContent(content);
infoWindow.open(map, marker);
});
}
从'@angular/core'导入{Component，OnInit，ViewChild}；
从“@angular/forms”导入{FormBuilder、FormGroup、Validators}；
@组成部分({
选择器：“应用程序方向”，
templateUrl:'./directions.component.html'，
样式URL:['./directions.component.css']
})
导出类DirectionComponent实现OnInit{
指导形式：FormGroup；
地图：google.maps.map；
错误：字符串；
Markerary=[]；
infowindow=新建google.maps.infowindow；
directionsService=new google.maps.directionsService（）；
directionsRenderer=new google.maps.directionsRenderer（{suppressMarkers:true}）；
@ViewChild（'dform'，{static:false}）directionsFormDirective；
@ViewChild（“gmap”）gmapElement：任何；
构造函数（私有fb:FormBuilder，//FormBuilders是一个组数组（即名称、电子邮件、地址（新表单组作为地址可以进一步分开，如州、市等））
) {
这个.createForm（）；
}
恩戈尼尼特（）{
变量映射选项={
中心：新google.maps.LatLng（18.5793,73.8143），
缩放：15，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
this.map=new google.maps.map（this.gmapElement.nativeElement，mapOptions）；
this.directionsRenderer.setMap（this.map）；
}
formErrors={
“来源”：“，
“目的地”：”
};
验证消息={
“起源”：{
“必需”：“请提供原始地址”
},
“目的地”：{
“必需”：“请提供目标地址”
}
};
createForm（）{
this.directionsForm=this.fb.group({
来源：[''[Validators.required]]，
目的地：[''[Validators.required]]
});
this.directionsForm.valueChanges
.subscribe（数据=>this.onValueChanged（数据））；
此.onValueChanged（）；/（重新）立即设置验证消息
}
onValueChanged（数据？：any）{//data参数是可选的，可以使用“？”
如果（！this.directionsForm）{return；}
const form=this.directionsForm；
for（此.formErrors中的常量字段）{
if（this.formErrors.hasOwnProperty（字段））{
//清除以前的错误消息（如果有）
此.formErrors[字段]=''；
const control=form.get（字段）；
if（control&&control.dirty&&control.valid）{
const messages=this.validationMessages[field]；
for（const key in control.errors）{
if（control.errors.hasOwnProperty（key））{//是否不需要条件？
this.formErrors[field]+=messages[key]+''；
}
}
}
}
}
}
onSubmit（）{
this.calculateAndDisplayRoute（this.directionsService、this.directionsRenderer、this.map、this.infowindow）；
}
calculateAndDisplayRoute（方向服务、方向渲染器、地图、信息窗口）{
方向服务.路线(
{
原点：{query:this.directionsForm.get（'origin'）.value}，
目标：{query:this.directionsForm.get（'destination'）.value}，
travelMode:“驾驶”
},
功能（响应、状态）{
如果（状态=='OK'）{
//控制台日志（响应）；
directionsRenderer.setDirections（响应）；
var infoWindow=new google.maps.infoWindow（）；
//this.showSteps（响应、信息窗口、映射、this.markerary）；
//---------------------原点标记----------------------------
var marker=new google.maps.marker({
地图：地图，
位置：响应。路由[0]。支腿[0]。开始位置，
标题：响应。路由[0]。分支[0]。起始地址
});
var含量=
“格式化地址：”+响应。路由[0]。分支[0]。起始地址+
“
位置类型：”+响应。地理编码的_航路点[0]。类型+
“
地点ID:”+响应。地理编码的航路点[0]。地点ID；
infoWindow函数（infoWindow、content、map、marker）；
//---------------------目的地标记----------------------------
var marker=new google.maps.marker({
地图：地图，
位置：响应。路由[0]。支腿[0]。结束位置，
标题：响应。路由[0]。分支[0]。结束地址
});
var含量=
“格式化地址：”+响应。路由[0]。分支[0]。结束地址+
“
位置类型：”+响应。地理编码的_航路点[1]。类型+
“
地点ID:”+响应。地理编码的航路点[1]。地点ID；
infoWindow函数（infoWindow、content、map、marker）；
}否则{
window.alert（'由于'+状态，指示请求失败）；
}
});
}
infoWindowFunction=（infoWindow、内容、标记、地图）=>{
marker.addListener（“单击”，函数（e）{
infoWindow.setContent（content）；
信息窗口。打开（地图、标记）；
});
}
onSubmit() {
var geocoder = new google.maps.Geocoder();
this.geocodeAddress(geocoder, this.map, this.infowindow);
this.geocodingFormDirective.resetForm();
this.geocodingForm.reset({
input: ''
});
}
geocodeAddress=(geocoder, resultsMap, infowindow) =>{
var address=this.geocodingForm.get('input').value;
geocoder.geocode({'address': address}, function(results, status) {
if (status === 'OK') {
resultsMap.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: resultsMap,
position: results[0].geometry.location,
title: results[0].formatted_address
});
marker.addListener("click", function(e) {
//info Window
var content =
'Formatted Address: '+results[0].formatted_address+
'<br/>Location Type: '+results[0].geometry.location_type+
'<br/>Address Type: '+results[0].types+
'<br/>Place ID: '+results[0].place_id;
var infoWindow = new google.maps.InfoWindow({
content: content
});
infoWindow.open(resultsMap, marker);
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
onSubmit（）{
var geocoder=new google.maps.geocoder（）；
this.geocodeAddress（geocoder、this.map、this.infowindow）；
此.geocodingFormDirective.resetForm（）；
这是.geocodingForm.reset({
输入：“”
});
}
地理编码地址=（地理编码器、结果地图、信息窗口）=>{
onSubmit() {
var geocoder = new google.maps.Geocoder();
this.geocodeAddress(geocoder, this.map, this.infowindow);
this.geocodingFormDirective.resetForm();
this.geocodingForm.reset({
input: ''
});
}
geocodeAddress=(geocoder, resultsMap, infowindow) =>{
var address=this.geocodingForm.get('input').value;
geocoder.geocode({'address': address}, function(results, status) {
if (status === 'OK') {
resultsMap.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: resultsMap,
position: results[0].geometry.location,
title: results[0].formatted_address
});
marker.addListener("click", function(e) {
//info Window
var content =
'Formatted Address: '+results[0].formatted_address+
'<br/>Location Type: '+results[0].geometry.location_type+
'<br/>Address Type: '+results[0].types+
'<br/>Place ID: '+results[0].place_id;
var infoWindow = new google.maps.InfoWindow({
content: content
});
infoWindow.open(resultsMap, marker);
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
calculateAndDisplayRoute(directionsService, directionsRenderer, map, infowindow) {
directionsService.route(
{
origin: { query: this.directionsForm.get('origin').value },
destination: { query: this.directionsForm.get('destination').value },
travelMode: 'DRIVING'
},
(response, status) => { //<----- use arrow function instead of `function` keyword
if (status === 'OK') {
//console.log(response);
directionsRenderer.setDirections(response);
var infoWindow = new google.maps.InfoWindow();
//this.showSteps(response, infowindow, map, this.markerArray);
//---------------------Origin Marker----------------------------
var marker = new google.maps.Marker({
map: map,
position: response.routes[0].legs[0].start_location,
title: response.routes[0].legs[0].start_address
});
var content =
'Formatted Address: ' + response.routes[0].legs[0].start_address +
'<br/>Location Type: ' + response.geocoded_waypoints[0].types +
'<br/>Place ID: ' + response.geocoded_waypoints[0].place_id;
this.infoWindowFunction(infoWindow, content, map, marker);
//---------------------Destination Marker----------------------------
var marker = new google.maps.Marker({
map: map,
position: response.routes[0].legs[0].end_location,
title: response.routes[0].legs[0].end_address
});
var content =
'Formatted Address: ' + response.routes[0].legs[0].end_address +
'<br/>Location Type: ' + response.geocoded_waypoints[1].types +
'<br/>Place ID: ' + response.geocoded_waypoints[1].place_id;
this.infoWindowFunction(infoWindow, content, map, marker);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}