RangeError，谷歌地图方向服务。 angular2, SebastianM/angular2-google-maps

Posted 2023-02-23

【中文标题】RangeError，谷歌地图方向服务。 angular2, SebastianM/angular2-google-maps

【英文标题】：RangeError, google maps directions service. angular2, SebastianM/angular2-google-maps

【发布时间】：2017-03-19 16:35:52

【问题描述】：

我在使用地图路线服务时遇到此错误寻求帮助，我正在关注关于使用 ng-2 和 SebastianM/angular2-google- 实施谷歌地图路线服务的问题Directions service #495地图，我不确定我是否遗漏了什么，我对此进行了真正的研究，需要帮助了解错误的来源。

EXCEPTION: Uncaught (in promise): RangeError: Maximum call stack size exceeded
RangeError: Maximum call stack size exceeded

这是我在 module.ts 中声明的路线服务组件/指令，

import  Component, OnInit, Input  from '@angular/core';
import  MapsAPILoader, SebmGoogleMap, GoogleMapsAPIWrapper from 'angular2-google-maps/core';
import  Session  from '../../../session';

declare var google: any;
@Component(
 selector: 'sebm-google-map-directions',
 templateUrl: 'app/modules/move_requests/components/sebm-google-directions.component.html',
 styleUrls: [
    'app/modules/move_requests/components/move_requests.component.css'
]
)

export class DirectionsMapDirective  implements OnInit 
  @Input() origin: any;
  @Input() destination: any;
constructor(private mapsAPI: MapsAPILoader,private mapsAPIWrapper: GoogleMapsAPIWrapper) 

ngOnInit(): void 
    let latlngOrigin = Session.get('location_coordinates');
    let latlngDest = Session.get('to_location_coords');

    this.mapsAPIWrapper.getNativeMap().then(map =>

    this.origin = new google.maps.LatLng(latlngOrigin.lat,latlngOrigin.lng);
    this.destination = new google.maps.LatLng(latlngDest.lat,latlngDest.lng);

        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer;
        directionsDisplay.setMap(map);
        directionsService.route(
            origin: this.origin,
            destination: this.destination,
            waypoints: [],
            optimizeWaypoints: true,
            travelMode: 'DRIVING',

        ,function (res: any, status: any)
            if( status === 'OK') 
                console.log("STATUS WAS OK");
                directionsDisplay.setDirections(res)
             else 
                window.alert('Directions request failed due to ' + status);
            
        );
    );

在模板中有这个

<sebm-google-map style="height: 300px;">
   <sebm-google-map-directions [origin]="origin" [destination]="destination"></sebm-google-map-directions>
</sebm-google-map>

任何可能导致我解决错误的帮助或建议将不胜感激，谢谢。

【参考方案1】：

我的错是我没有将路线服务作为指令，而是一个组件，我已将路线服务移至指令，并在我的模块中声明它，然后将其用作 html 标记主机组件，如果有人想查看代码，只需评论此问题的线程即可。