Angular-google-maps: Lädt sebm-google-map-marker nicht mit * ngFor | asynchron

Bitte ein Update zu dem oben genannten Thema?

hey @ krunal039 - können Sie überprüfen, ob sich die <sebm-google-map-marker> nach Abschluss des asynchronen Vorgangs im DOM befinden? Vielen Dank!

Hallo Sebastian, ich habe gerade mein angle2 auf den neuesten Stand gebracht und es hat das Problem gelöst, nicht sicher, ob es mein schlechter Code oder etwas mit Angular war. aber es ist behoben. Gibt es auch Optionen zum Einstellen des automatischen Zooms basierend auf allen Markierungen?

@ krunal039 nein,

@SebastianM
Ich möchte diese Ausgabe erneut öffnen. Ich verwende angular2 rc.4 (die neueste Version von angular2) und stehe vor diesem Problem. Die Markierungen werden in das DOM geladen, jedoch nicht auf der Kartenleinwand angezeigt.

  <sebm-google-map 
      [latitude]="map_focus_lat"
      [longitude]="map_focus_lng"
      [zoom]="11">

    <sebm-google-map-marker *ngFor="let center of centers" 
    [latitude]="center.latitude" 
    [longitude]="center.longitude">
    </sebm-google-map-marker>
  </sebm-google-map>

centers ist ein Array von Objekten, wobei jedes Objekt Längen- und Breitengradparameter aufweist. centers wird asynchron über einen Dienst geladen. Andere HTML-Elemente, die *ngFor mit Zentren in der Vorlage verwenden, funktionieren ordnungsgemäß. Die Markierungen für jedes mittlere Objekt werden im DOM mit der richtigen Breite und Länge erstellt, aber aus irgendeinem Grund werden sie nicht auf der Karte angezeigt.

Ich habe das gleiche Problem mit angle.rc4.
Wenn ich die Größe des Browsers manuell verändere, wird mir außerdem die Karte angezeigt.

@SebastionM Ich habe das gleiche Problem auf RC4. Markierungen werden auf der Karte nicht angezeigt. Die Markierungen werden jedoch auf dem Dom angezeigt

das gleiche Problem hier. irgendwelche Lösungen?

das gleiche Problem auch hier. auf eckigem rc3

Finde es endlich heraus.
In meinem Szenario erhielt ich Daten vom HTTP-Dienst, die in JSON kamen. Ich habe die lat- und lng-Felder dieser Daten in die for-Schleife eingebunden. Es hat nicht funktioniert. Marker wurden in DOM erstellt, aber nicht auf Leinwand angezeigt.

So habe ich es herausgefunden:

1. Erstellt eine Schnittstelle mit dem Namen marker:
   Schnittstellenmarkierung {
   lat: Nummer;
   lng: Nummer;
   label?: string;
   ziehbar: boolean;
   }}
2. Wenn meine Daten beobachtbar werden, rufe ich bei der Subscribe-Methode eine andere Methode pushMarker () auf, wenn die Daten vollständig abgerufen wurden:

this.observable = this.gisDataService.getEntities (dcode);
this.observable.subscribe (
data => this.data = data.map ((entity: Entity) => new Entity (entity.uid, entity.alpha, entity.lat, entity.lng, entity.type, entity.tag, entity.addr, entity .desc, entity.zcode, entity.rcode, entity.dcode)),
Fehler => Alarm (Fehler),
() => this.pushMarkers () // hier rufe ich die Funktion am Ende auf
);

1. Dann habe ich meine Daten geloopt und in das Marker-Array verschoben:

this.data.forEach (element => {
this.markers.push ({
lat: Nummer (element.lat),
lng: Nummer (element.lng),
label: element.tag,
ziehbar: falsch
})
console.log ("push" + element.lat + "," + element.lng);
});

Hinweis: Ich habe herausgefunden, dass Daten, die in JSON empfangen werden, nicht in Zahlen konvertiert werden, selbst wenn Sie JSON einer Klasse zuordnen (wie ich). Zum Zeitpunkt des Pushing (in der pushMarker () -Funktion müssen Sie jedoch lat / lng explizit in Number () konvertieren.

Ich hoffe es hilft.

@ Nileshmahant Super! Ich musste explizit in Number () konvertieren. Vielen Dank :)

Danke @nileshmahant hat mein Problem gelöst!

Ich möchte diesen erneut öffnen, um die Konvertierung in der Komponente zu erhalten, anstatt den konvertierten Wert eingeben zu müssen

+1 hat für mich eine Weile gedauert, um das herauszufinden, und der Anwendungsfall für das Laden von Markern aus JSON ist ziemlich logisch

Ich bin gerade darauf gestoßen und dachte, ich würde meine Arbeit teilen, falls jemand anderes darauf stößt.

In meiner ts-Datei habe ich eine einfache Methode hinzugefügt, um eine Zeichenfolge in eine Zahl umzuwandeln:

private convertStringToNumber(value: string): number {
        return +value;
    }

Dann übergebe ich im HTML einfach das Lat / Long an diese Methode:

<sebm-google-map-marker *ngFor="let location of clientLocations" [latitude]="convertStringToNumber(location.latitude)" [longitude]="convertStringToNumber(location.longitude)"></sebm-google-map-marker>

Nett!

Darf ich vorschlagen, dass anstelle einer privaten Funktion eine Pipe zu erstellt wird
mach das. Es würde viel schöner aussehen und tragbar sein.

Auch nicht viel mehr Arbeit.

Ich könnte ein Beispiel geben, wenn Sie eines wollen :-)

Am 1. April 2017 um 02:12 schrieb Austin LaRue [email protected] :

Ich bin gerade darauf gestoßen und dachte, ich würde meine Arbeit für den Fall teilen
jemand anderes läuft hinein.

In meiner ts-Datei habe ich eine einfache Methode hinzugefügt, um eine Zeichenfolge in eine Zahl umzuwandeln:

private convertStringToNumber (Wert: Zeichenfolge): Nummer {
return + value;
}}

Dann übergebe ich im HTML einfach das Lat / Long an diese Methode:

[Latitude] = "convertStringToNumber (location.latitude)" [longitude] = "
convertStringToNumber (location.longitude) ">

- -
Sie erhalten dies, weil Sie diesen Thread abonniert haben.
Antworte direkt auf diese E-Mail und sieh sie dir auf GitHub an
https://github.com/SebastianM/angular2-google-maps/issues/330#issuecomment-290757110 ,
oder schalten Sie den Thread stumm
https://github.com/notifications/unsubscribe-auth/AY4FmON0vwkqtvbC3qlBK1E6SQQQsAr2ks5rrSXggaJpZM4IaCkp
.

Wow, ich habe über eine Stunde lang meinen Kopf dagegen geschlagen, bevor ich dieses Problem gefunden habe. Das hat bei mir perfekt funktioniert :)

Im Allgemeinen habe ich die Erfahrung gemacht, dass Sie, wenn agm-Marker im DOM sichtbar sind, aber nicht angezeigt werden, ngFor wahrscheinlich auf irgendeine Weise einen falschen Objekttyp übergeben haben (entweder einen falschen Typ als oben genannten Zahlentyp oder etwas, das überhaupt keine lat und long enthält) war mein Fall). Überprüfen Sie noch einmal, was Sie an das Marker-Array senden.

Ich möchte diese Ausgabe erneut öffnen.
Ich versuche, vordefinierte Markierungen anzuzeigen und Markierungen auf dem Bildschirm zu generieren, wenn der Benutzer auf einen Punkt auf der Karte klickt, aber mit ngfor werden die Markierungen nicht auf der Karte angezeigt.
In meiner HTML-Datei habe ich

<sebm-google-map
          [latitude]="lat"
          [longitude]="lng"
          [zoom]="zoom"
          [disableDefaultUI]= false
          [zoomControl]= true
          (mapClick)="mapClicked($event)">

          <sebm-google-map-marker
            *ngFor="let m of markers; let i = index"
            (markerClick)="clickedMarker(m,i)"
            [latitude]="convertStringToNumber(m.lat)"
            [longitude]="convertStringToNumber(m.lng)"
            [markerDraggable]="m.draggable"
            (dragEnd)="markerDragEnd(m, $event)"
          >

            <sebm-google-map-info-window>
              <strong>{{m.name}}</strong>
            </sebm-google-map-info-window>
          </sebm-google-map-marker>
        </sebm-google-map>

und um die Markierungen in meiner service.ts-Datei hinzuzufügen und anzuzeigen, habe ich

  getMarkers(){
    var markers = JSON.parse(localStorage.getItem('markers'));
    return markers;
  }

  addMarker(newMarker){
    //fetch marker that are already there
    var markers = JSON.parse(localStorage.getItem('markers'));

    // Push to array
    markers.push(newMarker);

    //set markers again
    localStorage.setItem('markers',JSON.stringify(markers))
  }

Auch ich habe die Werte lat und long als string Objekte gespeichert, also musste ich eingebaute DecimalPipe wie folgt verwenden:

... *ngFor="let pin of pins" [latitude]="pin.lat|number:'1.0-8'" ...

Offizielles Dokument: https://angular.io/api/common/DecimalPipe