如何在 Angular 6 中修复“InvalidValueError”答案

【问题标题】：How to fix "InvalidValueError" in Angular 6如何在 Angular 6 中修复“InvalidValueError”
【发布时间】：2019-01-01 12:04:43
【问题描述】：

我正在使用 Angular 6 使用 Google Maps 方向 API 启动带有方向的谷歌地图。在我实现代码之后。控制台显示以下错误：

未被抓住（承诺） Jc {消息：“initMap 不是函数”，名称：“InvalidValueError”，堆栈：“Error↵ at new Jc (https://maps.googleapis.com/m…F5xxXLWf2ZqIDEfUDitY7Ncs&callback=initMap:123:108"} 信息： “initMap 不是函数” 姓名： “无效值错误”

home.component.ts ：

import { Component, OnInit } from '@angular/core';
declare var google: any;

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['../../resources/css/style.min.css', '../../resources/css/bt.min.css']
})

// declare var calculateAndDisplayRoute(directionsService, directionsDisplay) : any;

export class HomeComponent implements OnInit {

    initMap() {
        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer;
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 7,
            center: {lat: 41.85, lng: -87.65}
        });
        directionsDisplay.setMap(map);

        var onChangeHandler = function() {
            this.calculateAndDisplayRoute(directionsService, directionsDisplay);
        };
        document.getElementById('start').addEventListener('change', onChangeHandler);
        document.getElementById('end').addEventListener('change', onChangeHandler);
    }

    calculateAndDisplayRoute(directionsService, directionsDisplay) {
        directionsService.route({
            origin: (<HTMLInputElement>document.getElementById('start')).value,
            destination: (<HTMLInputElement>document.getElementById('end')).value,
            travelMode: 'DRIVING'
        }, function(response, status) {
            if (status === 'OK') {
                directionsDisplay.setDirections(response);
            } 
            else {
                window.alert('Directions request failed due to ' + status);
            }
        });
    }

    constructor() {

    }

    ngOnInit() {
        this.initMap();
    }

}

我不知道为什么会出现此错误消息。有人可以帮忙吗？

【问题讨论】：

使用年度股东大会 :: npmjs.com/package/@agm/core

标签： angular google-maps

【解决方案1】：

显然此错误是由于在加载 Google Maps JavaScript API 时存在 callback 参数：

<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

由于您的地图是通过 ngOnInit 生命周期方法初始化的，因此回调参数可以从 url 中丢弃。

Here is a demo 演示如何通过 Angular2+ 应用程序使用 Google Maps Directions Service

【讨论】：