Angular-google-maps: FitBounds utilisant

J'aimerais savoir comment générer des limites à partir de mes marqueurs pour utiliser également cette fonction fitbound. Je n'ai pas pu comprendre comment créer un objet LatLng à passer dans la fonction bound.extends afin que je puisse utiliser la liaison angulaire 2 et mapper la propriété fitBounds de sebm-google-map-marker à ma variable de limites.
@suleymanozev -- Je sais comment utiliser les fitbounds tant que je peux générer un objet LatLng. Vous souhaitez travailler ensemble ?

Mon travail temporaire consiste à parcourir les données de mon appareil et à calculer manuellement mon point central en utilisant la moyenne entre l'ouest, l'est, le nord et le sud, car je ne peux pas me mettre en forme pour travailler. Évidemment, en utilisant cette méthode, vous obtiendriez le centre correct mais le niveau de zoom ne serait pas correct.

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;

Mettre à jour
J'ai décidé d'utiliser le LatLngBoundsLiteral et j'ai mappé mes calculs est, ouest, nord, sud directement et cela semble fonctionner.

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

Puis code HTML
<sebm-google-map #mygmap [latitude]="center.lat" [longitude]="center.lng" usePanning="true" [fitBounds]="boundsl">

Vous pouvez générer des LatLngBounds avec cette fonction :

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

Une partie importante est que MapsApiLoader de angular2-google-maps, car vous ne pouvez pas utiliser l'objet google.maps avant que cet événement n'ait été déclenché.

Les gars, j'ai vu ce commit de @SebastianM. https://github.com/SebastianM/angular2-google-maps/commit/d625ab6796768d167d7a0f9f2b9a504fce8a2bea
Il semble qu'il ait déjà supprimé l'attribut fitbounds. Doit-on plutôt utiliser la latitude et la longitude ?

J'ai fini par générer les limites que j'utilise sur AngularJS, puis calculer la latitude et la longueur du centre en fonction des limites. Il reste encore des choses à gérer, par exemple le niveau de zoom.

Cela pourrait-il être utile pour vous les gars.

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>

Bonjour, j'ai commencé à utiliser cette lib et c'est incroyable. J'ai cherché à centrer ma carte en fonction des marqueurs et je ne comprends pas pourquoi cela est rendu si difficile ...
J'ai déclaré mes marqueurs et écrit une méthode simple qui centrera la carte en fonction des marqueurs :

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 Je ne comprends pas pourquoi cela est rendu si difficile ...

Parce qu'obtenir le centre est ok, mais qu'en est-il du niveau « zoom ». C'est là que LatBounds entre en place et je dois encore trouver un moyen approprié de l'implémenter.

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 Comment effectuer un zoom arrière ou un zoom avant pour afficher tous les marqueurs après avoir

@Jonathu Je ne l'ai pas utilisé depuis longtemps, mais avez-vous essayé la fonction generateBounds ci-dessus ?

@ trungk18 Oui, et cela fonctionne mais semble tenir le dernier zoom appliqué par l'utilisateur :/

@tscislo Est-il possible d'inclure également le constructeur ?
Je ne connais pas le type de mesure et où puis-je trouver ILocation ?
Je ne peux trouver l'emplacement que dans @angular/common

@Jonatthu regardez le conteneur sebm, il dit: 'scrollwheel=false', pas étonnant que vous ne puissiez pas zoomer ou dézoomer.

Et si vous modifiez quelque chose après les latbounds initiales, vous devez à nouveau allouer le niveau de zoom pour réinitialiser les latlngbounds.

@tscislo l' a bien fait et j'ai réussi à le faire fonctionner. Il a utilisé différentes variables, mais n'importe quel programmeur peut le comprendre.

Je l'ai fait comme suit :

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 un moyen de mettre un décalage sur la carte ?

@VinceEeckhout
J'ai mis à jour mon exemple et supprimé mon interface ILocation personnalisée dont vous n'avez pas du tout besoin. J'espère que ça aide !

@tscislo Merci pour l'aide
@Cacanny Merci pour l'aide

Bonjour @Cacanny et @tscislo comment utiliser la même chose dans les observables. En faisant les choses ci-dessus, j'obtiens un autre problème. Après avoir passé à nouveau les paramètres (re-rendu de la page par la liste des lieux), cela montre l'erreur que this.marker n'est pas défini. Est-ce qu'il y a un autre moyen. Les réponses sont appréciées.
L'utilisation de NgZone résout-elle ce problème. Si oui, comment utiliser Ngzone dans ce code.

Comment est-ce fermé, la documentation n'est pas encore ajoutée à la documentation de l'API.

@tscislo où est votre exemple s'il vous plaît partagez le lien afin que je puisse voir

@samtidbit s'il vous plaît jeter un oeil à mon formulaire de commentaire 23 janvier

Ouais, un vrai exemple non bidon dont nous avons besoin pour importer d'autres importations ?

@tscislo ,