如何使用 ActivateRoute 的查询参数地图来启动导航地图，反之亦然？

Question

以下是我的路由解析器、路由配置和组件。我正在尝试使用 url 参数来初始化地图（假设 google 地图）- 似乎不起作用，因为始终使用默认 lat/lon 值并且从中检索参数值ActivatedRoute 为空。

Url: http://localhost:4500?lat=12&lng=14

此外，下一步将更新路线查询参数以反映地图上的任何平移操作（用户拖动地图和中心坐标改变）

    export class MyComponent {

        lat: number;
        lon: number;

        private map: any;

        constructor(private route: ActivatedRoute, private router: Router) {
            this.route.data.subscribe(data => {
                this.lat = Number(this.route.snapshot.queryParamMap.get('lat')) || 10;
                this.lon = Number(this.route.snapshot.queryParamMap.get('lon')) || 12;
           this.updateUrl();
}

updateUrl() {

    this.router.navigate([], {
        relativeTo: this.route,
        queryParams: {
            lat: this.lat,
            lon: this.lon
        },
        queryParamsHandling: 'preserve',
        // preserve the existing query params in the route
        skipLocationChange: false
    });
}


        public ngOnInit() {
            this.map = new GoogleLikeMap()

            this.map.setCameraGeolocationAndZoom(
                new GeoCoordinates(Number(this.lat), Number(this.lng)),
                14
            );

            this.map.addEventListener('panning', () => {

                this.lat = this.map.geoCenter.lat;
                this.lng = this.map.geoCenter.longitude;

                this.router.navigateByUrl('/?lat=' + this.lat + '&lng=' + this.lng);
            });
        }
    }

正在尝试以 http:localhost:4500 身份访问我的 url 如果 url 中还没有默认的纬度和经度值，它应该将其附加到 url 中。如果这些值已经通过浏览器传递给 url，则应在该中心点初始化地图。

Answer 1

我可以通过订阅 ActivatedRoute 的 queryParams 来简单地完成这项工作。

 this.route.queryParams.subscribe(params => {
            this.lat = params.lat;
            this.lon = params.lon;
        });

如何使用 ActivateRoute 的查询参数地图来启动导航地图，反之亦然？

How to use ActivateRoute's query params map to initiate a navigation map and vice-versa?

angular

angular2-routing

angular-routing

angular8

angular-router