Блог

Я работаю над веб-приложением, и там я использую карту Google для рисования путей(с помощью api направления) и маркеров на основе списка местоположений. Пути направления и маркеры работают без каких-либо проблем, но мне нужно позвонить в fitBounds после завершения рисования всех путей и маркеров.

Это то, что я пробовал до сих пор

   init() {
    this.drawPaths(this.routes, directionsRendererOptions)
    .subscribe(() => {
        console.log('Path added')
      }, e => {
        console.log('Error', e)
      }, 
      () => {
        console.log('Completed');
        this.addMarkers(this.serviceViewModels);

        setTimeout(() => {
          this.setBounds();
        }, 1000)
    });
  }


drawPaths(routes: { origin: LatLng | string, destination: LatLng, waypoints, useTolls: boolean }[],
            directionRendererOptions?): Observable<{ encodedPath: string, routeIndex: number }> {
    this.routes = routes;
    return interval(300)
      .pipe(
        take(routes.length),
        mergeMap((routeIndex: number) => {
          const route = routes[routeIndex];
          return this.drawPath(route.origin, route.destination, route.waypoints, route.useTolls, routeIndex, directionRendererOptions);
        }),
        map((response: { result, status, routeIndex: number }) => {
          return {encodedPath: response.result.routes[0].overview_polyline, routeIndex: response.routeIndex};
        }),
      );
  }

  drawPath(origin: LatLng | string, destination: LatLng, waypoints,
           useTolls = false,
           locationIndex?: number, directionsRendererOptions?)
    : Observable<{ result, status, routeIndex: number }> {
    return new Observable(observer => {
      const directionsService = new google.maps.DirectionsService();
      let directionsRenderer = new google.maps.DirectionsRenderer({
        suppressMarkers: true,
        preserveViewport: false,
      });

      if (directionsRendererOptions) {
        directionsRenderer = new google.maps.DirectionsRenderer({
          suppressMarkers: true,
          preserveViewport: false,
          draggable: directionsRendererOptions.draggable,
          polylineOptions: directionsRendererOptions.polylineOptions,
        });
      }

      const request = {
        origin,
        destination,
        travelMode: google.maps.TravelMode.DRIVING,
        optimizeWaypoints: true,
        waypoints,
        avoidTolls: !useTolls
      };

      directionsRenderer.setMap(this.map);
      directionsService.route(request, (result, status) => {
        if (status === 'OK') {
          directionsRenderer.setDirections(result);
          observer.next({result, status, routeIndex: locationIndex});
        } else {
          observer.error({result, status});
        }
        observer.complete();
      });
    });
  }

  addMarkers(serviceViewModels: ServiceViewModel[]): void {
    serviceViewModels?.forEach((m, index) => {
      const marker = new google.maps.Marker();
      const label = {text: 'Start', color: 'white', fontWeight: 'bold', fontSize: '14px'};
      const icon = {
        url: `./assets/icons/circle.svg`, scaledSize: new google.maps.Size(30, 30),
        labelOrigin: new google.maps.Point(15, 15),
      };
      marker.setMap(this.map);
      marker.setLabel({...label, text: this.setLabelText(index, this.serviceViewModels.length)});
      marker.setPosition(m.locationDetails?.geoLocation);
      marker.setIcon(icon);
      this.markers.push(marker);
    });
  }

  setBounds(){
    const bounds = new google.maps.LatLngBounds();
    this.markers.forEach((mkr, i) => {
      bounds.extend(mkr.getPosition());
    })
    this.map.fitBounds(bounds);
    this.map.panToBounds(bounds);
  }
 

Этот код работает без проблем с таймаутом. Но когда его удаляют, границы задаются неправильно, и карта фокусируется на одном маркере

кто-нибудь знает, что не так с этим кодом? или я что-то упускаю?