Angular-google-maps: FitBounds mit

Ich würde gerne wissen, wie ich aus meinen Markern Grenzen generieren kann, um auch diese Fitbound-Funktion zu verwenden. Ich konnte mein Leben lang nicht herausfinden, wie man ein LatLng-Objekt erstellt, das an die Funktionbound.extends übergeben wird, damit ich die Winkel-2-Bindung verwenden und die fitBounds-Eigenschaft von sebm-google-map-marker meiner Bounds-Variablen zuordnen kann.
@suleymanozev - Ich weiß, wie man Fitbounds verwendet, solange ich ein LatLng-Objekt generieren kann. Sie möchten zusammenarbeiten?

Meine vorübergehende Arbeit besteht darin, meine Gerätedaten zu durchlaufen und meinen Mittelpunkt manuell mit dem Durchschnitt zwischen West, Ost, Nord und Süd zu berechnen, da ich nicht fit für die Arbeit werde. Offensichtlich würden Sie mit dieser Methode die Mitte korrekt erhalten, aber die Zoomstufe wäre nicht richtig.

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;

Aktualisieren
Ich habe mich entschieden, das LatLngBoundsLiteral zu verwenden und habe meinen berechneten Osten, Westen, Norden und Süden direkt darauf abgebildet und es scheint zu funktionieren.

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

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

Sie können LatLngBounds mit dieser Funktion generieren:

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

Wichtiger Teil ist der MapsApiLoader von angle2-google-maps, da Sie das google.maps-Objekt nicht verwenden können, bevor dieses Ereignis ausgelöst wurde.

Leute, ich habe diesen Commit von @SebastianM gesehen. https://github.com/SebastianM/angular2-google-maps/commit/d625ab6796768d167d7a0f9f2b9a504fce8a2bea
Anscheinend hat er das Fitbounds-Attribut bereits entfernt. Sollten wir stattdessen Breiten- und Längengrad verwenden?

Am Ende habe ich die Grenzen generiert, wie ich sie in AngularJS verwende, und dann den mittleren Lat und Long basierend auf den Grenzen berechnet. Es gibt noch einige weitere Dinge zu handhaben, zB die Zoomstufe.

Könnte für euch hilfreich sein.

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>

Hallo, ich habe angefangen, diese Bibliothek zu verwenden und es ist erstaunlich. Ich habe versucht, meine Karte basierend auf den Markierungen zu zentrieren, und ich verstehe nicht, warum dies so schwierig ist ...
Ich habe meine Markierungen deklariert und eine einfache Methode geschrieben, die die Karte basierend auf den Markierungen zentriert:

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 Ich verstehe nicht, warum das so schwierig ist ...

Weil es in Ordnung ist, die Mitte zu bekommen, aber was ist mit der "Zoom"-Stufe. Hier kommt LatBounds ins Spiel und ich muss noch einen richtigen Weg finden, dies zu implementieren.

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 Wie kann man heranzoomen , um alle Markierungen anzuzeigen, nachdem die Karte

@Jonatthu Ich habe es schon lange nicht mehr verwendet, aber hast du die Funktion "generateBounds" oben ausprobiert?

@trungk18 Ja, und es funktioniert, aber es scheint, als würde der letzte vom Benutzer angewendete Zoom

@tscislo Ist es möglich, auch den Konstruktor
Ich kenne die Art der Messung nicht und wo finde ich ILocation ?
Ich kann den Standort nur in @angular/common finden

@Jonatthu schau

Und wenn Sie nach den anfänglichen Breitengrenzen etwas ändern, müssen Sie die Zoomstufe erneut zuweisen, um die Breitengrenzen zurückzusetzen.

@tscislo hat es gut gemacht und ich habe es geschafft, es zum

Ich habe es wie folgt gemacht:

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 eine Möglichkeit, der Karte einen Offset

@VinceEeckhout
Ich habe mein Beispiel aktualisiert und meine benutzerdefinierte ILocation-Schnittstelle entfernt, die Sie überhaupt nicht benötigen. Ich hoffe, es hilft!

@tscislo Danke für die Hilfe 👍
@Cacanny Danke für die Hilfe 👍

Hallo @Cacanny und @tscislo, wie man dasselbe in Observables verwendet. Wenn ich die oben genannten Dinge tue, bekomme ich ein weiteres Problem. Nach dem erneuten Übergeben der Parameter (erneutes Rendern der Seite anhand der Liste der Orte) wird der Fehler angezeigt, dass this.marker nicht definiert ist. Gibt es eine andere Möglichkeit. Die Antworten werden geschätzt.
Behebt die Verwendung von NgZone dieses Problem. Wenn ja, So verwenden Sie Ngzone in diesem Code.

Wie wird dies geschlossen, Dokumentation ist noch nicht zur API-Dokumentation hinzugefügt.

@tscislo wo ist dein beispiel bitte teile den link damit ich es sehen kann

@samtidbit bitte schau dir mein Kommentarformular an 23. Januar

Ja, irgendein wirkliches nicht-hackiges Beispiel, das wir in andere Importe bringen müssen?

@tscislo , es funktioniert