Angular-google-maps: FitBounds usando

Gostaria de saber como gerar limites a partir de meus marcadores para usar essa função de ajuste também. Não consegui descobrir como criar um objeto LatLng para passar para a função bound.extends para poder usar a vinculação angular 2 e mapear a propriedade fitBounds de sebm-google-map-marker para minha variável bounds.
@suleymanozev - Sei como usar fitbounds, desde que possa gerar um objeto LatLng. Você quer trabalhar junto?

Minha solução temporária é percorrer os dados do meu dispositivo e calcular manualmente meu ponto central usando a média entre oeste, leste, norte e sul, já que não consigo entrar em forma para trabalhar. Obviamente, usando este método, você obteria o centro correto, mas o nível de zoom não estaria correto.

west = devicedata[0].Long;
east = devicedata[0].Long;
north = devicedata[0].Lat;
south = devicedata[0].Lat;
for(let dev of this.devicedata) {
if(west > dev.Long){
west = dev.Long
}
if(east < dev.Long){
east = dev.Long
}
if( north < dev.Lat){
north = dev.Lat
}
if( south > dev.Lat){
south = dev.Lat
}
}
this.center.lat = (north + south)/2;
this.center.lng = (east + west)/2;

Atualizar
Decidi usar o LatLngBoundsLiteral e mapeei meu cálculo leste, oeste, norte e sul diretamente para ele e parece estar funcionando.

var offset = 0.25;
this.boundsl = <LatLngBoundsLiteral>{west: west - offset, north: north + offset, south: south - offset, east: east + offset};

Depois, o código HTML
<sebm-google-map #mygmap [latitude]="center.lat" [longitude]="center.lng" usePanning="true" [fitBounds]="boundsl">

Você pode gerar LatLngBounds com esta função:

import { MapsAPILoader } from 'angular2-google-maps/core';
constructor(private mapsAPILoader:MapsAPILoader) {}
this.mapsAPILoader.load().then(() => {let latlngbounds = new google.maps.LatLngBounds();})

A parte importante é que MapsApiLoader do angular2-google-maps, porque você não pode usar o objeto google.maps antes que este evento seja disparado.

Pessoal, eu vi esse commit do @SebastianM. https://github.com/SebastianM/angular2-google-maps/commit/d625ab6796768d167d7a0f9f2b9a504fce8a2bea
Parece que ele já removeu o atributo fitbounds. Devemos usar latitude e longitude em vez disso?

Acabei gerando os limites conforme uso no AngularJS e, em seguida, calculei o centro de latitude e longitude com base nos limites. Existem ainda mais algumas coisas para lidar, por exemplo, nível de zoom.

Pode ser útil para vocês.

generateBounds(markers): any {
        if (markers && markers.length > 0) {
            var bounds = new google.maps.LatLngBounds();

            markers.forEach((marker: any) => {
                bounds.extend(new google.maps.LatLng({ lat: marker.latitude, lng: marker.longitude }));
            });

            //check if there is only one marker
            if (bounds.getNorthEast().equals(bounds.getSouthWest())) {
                var extendPoint = new google.maps.LatLng(bounds.getNorthEast().lat() + 0.01, bounds.getNorthEast().lng() + 0.01);
                bounds.extend(extendPoint);
            }

            return {
                northeast: {
                    latitude: bounds.getNorthEast().lat(),
                    longitude: bounds.getNorthEast().lng()
                },
                southwest: {
                    latitude: bounds.getSouthWest().lat(),
                    longitude: bounds.getSouthWest().lng()
                }
            }
        }
        //return empty object when no bundle selected
        return {};
    }

this.bounds = this.generateBounds(this.bundleMarkers)
this.lat = (this.bounds.northeast.latitude + this.bounds.southwest.latitude) / 2;
this.lng = (this.bounds.northeast.longitude + this.bounds.southwest.longitude) / 2;

<sebm-google-map [latitude]="lat" [longitude]="lng">        
    <sebm-google-map-marker 
        *ngFor="let marker of bundleMarkers"
        [latitude]="marker.latitude"
        [longitude]="marker.longitude"
        [label]="marker.label"
        [title]="marker.title">
    </sebm-google-map-marker>
</sebm-google-map>

Olá, comecei a usar esta lib e é incrível. Tenho procurado centralizar meu mapa com base nos marcadores e não entendo por que isso é tão difícil ...
Eu declarei meus marcadores e escrevi um método simples que centralizará o mapa com base nos marcadores:

getCenterMarkers (): void {

    let lat: number = 0;
    let lng: number = 0;

    this.markers.forEach(marker => {
        lat += marker.lat;
        lng += marker.lng;
    });

    this.center.lat = lat/this.markers.length;
    this.center.lng = lng/this.markers.length;
}

@VinceEeckhout Não entendo por que isso é tão difícil ...

Porque conseguir o centro está ok, mas e o nível de 'zoom'. É aqui que o LatBounds entra em ação e ainda preciso encontrar uma maneira adequada de implementá-lo.

import {MapsAPILoader} from 'angular2-google-maps/core';

 constructor(private mapsAPILoader: MapsAPILoader) {
        this.mapsAPILoader.load().then(() => {
                **this.latlngBounds = new window['google'].maps.LatLngBounds();**
                this.measurement.locations.forEach((location) => {
                    this.latlngBounds.extend(new window['google'].maps.LatLng(location.lat, location.lng))
                })
            }
        )
)

            <sebm-google-map
                    [latitude]="lat"
                    [longitude]="lng"
                    [zoomControl]="false"
                    [disableDefaultUI]="true"
                    [streetViewControl]="false"
                    [mapDraggable]="false"
                    **[fitBounds]="latlngBounds"**
                    [scrollwheel]="false">
                <sebm-google-map-marker
                        *ngFor="let location of measurement.locations"
                        [latitude]="location.lat"
                        [longitude]="location.lng">
                </sebm-google-map-marker>
            </sebm-google-map>

@ trungk18 Como diminuir ou aumentar o zoom para ver todos os marcadores depois de centralizar o mapa?

@Jonatthu Não uso há muito tempo, mas você já tentou a função generateBounds acima?

@ trungk18 Sim, e está funcionando, mas parece que está segurando o último zoom aplicado pelo usuário: /

@tscislo É possível incluir também o construtor?
Não sei o tipo de medição e onde posso encontrar ILocation?
Só consigo encontrar a localização em @ angular / common

@Jonatthu olhe para o contêiner sebm, ele diz: 'scrollwheel = false', não é à toa que você não pode aumentar ou diminuir o zoom.

E se você mudar algo após os latbounds iniciais, terá que alocar o nível de zoom novamente para redefinir os latlngbounds.

@tscislo fez bem e consegui fazer funcionar. Ele usou variáveis ​​diferentes, mas qualquer programador pode descobrir isso.

Eu fiz o seguinte:

import { MapsAPILoader } from 'angular2-google-maps/core';

latlngBounds;

    constructor(
        ...
        private mapsAPILoader: MapsAPILoader
    ) { };

    this.mapsAPILoader.load().then(() => {
                    this.latlngBounds = new window['google'].maps.LatLngBounds();
                    this.markers.forEach((location) => {
                        this.latlngBounds.extend(new window['google'].maps.LatLng(location.lat, location.lng))
                    })
                });



md5-3b89998d3378d7952a828cbdec3a9606




 <sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [disableDefaultUI]="false" [zoomControl]="false" (mapClick)="mapClicked($event)" [streetViewControl]="false" [fitBounds]="latlngBounds" class="content-map"> </sebm-google-map>

@Cacanny alguma maneira de colocar um deslocamento no mapa?

@VinceEeckhout
Eu atualizei meu exemplo e removi minha interface ILocation personalizada que você não precisa de jeito nenhum. Espero que ajude!

@tscislo Obrigado pela ajuda 👍
@Cacanny Obrigado pela ajuda 👍

Olá @Cacanny e @tscislo como usar a mesma coisa em observáveis. Ao fazer as coisas acima, estou tendo outro problema. Depois de passar os parâmetros novamente (renderizando novamente a página pela lista de lugares) Mostra o erro que this.marker é indefinido. Existe alguma outra maneira. As respostas são apreciadas.
Usar o NgZone resolve esse problema. Em caso afirmativo, como usar Ngzone neste código.

Como isso é fechado, a documentação ainda não foi adicionada à documentação da API.

@tscislo onde está seu exemplo, compartilhe o link para que eu possa ver

@samtidbit por favor, dê uma olhada no meu formulário de comentários 23 de janeiro

Sim, algum exemplo real não hacky que precisamos para trazer outras importações?

@tscislo , está funcionando bem. Obrigado pela informação.