Angular-google-maps: Ne charge pas sebm-google-map-marker avec * ngFor | asynchrone

s'il vous plaît une mise à jour sur le problème ci-dessus?

hey @ krunal039 - pouvez-vous vérifier si les <sebm-google-map-marker> sont dans le DOM une fois l'opération asynchrone terminée? Merci!

Salut Sebastian, je viens de mettre à jour mon angular2 au dernier et il a résolu le problème pas sûr que c'était mon mauvais code ou quelque chose avec angular. mais c'est fixe. existe-t-il également des options pour définir le zoom automatique en fonction de tous les marqueurs?

@ krunal039 non, pas possible pour le moment - désolé. veuillez ouvrir un nouveau numéro pour cela si vous en avez besoin. afin que nous puissions discuter des détails de l'API. Merci!

@SebastianM
J'aimerais rouvrir ce numéro. J'utilise angular2 rc.4 (la dernière version angular2 à ce jour) et je suis confronté à ce problème. Les marqueurs se chargent dans DOM mais n'apparaissent pas sur le canevas des cartes.

  <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 est un tableau d'objets, chaque objet ayant des paramètres de latitude et de longitude. centers est chargé de manière asynchrone via un service. D'autres éléments html utilisant *ngFor avec des centres dans le modèle fonctionnent correctement. Les marqueurs pour chaque objet central sont créés dans le DOM avec une latitude et une longitude correctes, mais pour une raison quelconque, ils n'apparaissent pas sur la carte.

Je suis confronté au même problème en utilisant angular.rc4.
De plus, si je redimensionne le navigateur manuellement, la carte me s'affiche.

@SebastionM J'ai le même problème sur rc4. Les marqueurs n'apparaissent pas sur la carte. Les marqueurs apparaissent sur le dom

même problème ici. des solutions?

même problème ici aussi. sur rc3 angulaire

Enfin comprendre.
Dans mon scénario, j'obtenais des données du service Http qui arrivaient en JSON. Je liais les champs lat et lng de ces données dans la boucle for. Cela ne fonctionnait pas. Les marqueurs étaient créés dans DOM mais ne s'affichaient pas dans le canevas.

Voici comment je l'ai compris:

1. Création d'une interface nommée marker:
   marqueur d'interface {
   lat: nombre;
   lng: nombre;
   label?: chaîne;
   déplaçable: booléen;
   }
2. Lorsque mes données deviennent observables, puis à la méthode subscribe, j'appelle une autre méthode pushMarker () lorsque les données sont complètement récupérées:

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)),
erreur => alerte (erreur),
() => this.pushMarkers () // c'est là que j'appelle la fonction à la fin
);

1. Ensuite, j'ai bouclé mes données et les ai poussées dans un tableau de marqueurs:

this.data.forEach (élément => {
this.markers.push ({
lat: nombre (element.lat),
lng: nombre (element.lng),
label: element.tag,
déplaçable: faux
})
console.log ("poussé" + élément.lat + "," + élément.lng);
});

Remarque: j'ai compris que lorsque les données sont reçues dans JSON, elles ne sont pas converties en nombre, même si vous mappez JSON à une classe (comme je l'ai fait). Mais au moment de Pushing (dans la fonction pushMarker (), vous devez convertir explicitement lat / lng en Number ().

J'espère que cela aide.

@nileshmahant Super! J'avais besoin de convertir explicitement en Number (). Merci :)

Merci @nileshmahant a résolu mon problème!

Je voudrais rouvrir celui-ci, pour obtenir la conversion dans le composant, au lieu d'avoir à lui fournir la valeur convertie

+1 pour moi, il m'a fallu un certain temps pour comprendre cela et le cas d'utilisation du chargement de marqueurs à partir de JSON est assez logique

Je viens de tomber sur ceci et j'ai pensé partager mon travail au cas où quelqu'un d'autre y tomberait.

Dans mon fichier ts, j'ai ajouté une méthode simple pour convertir une chaîne en nombre:

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

Ensuite, dans le html, je passe simplement le lat / long à cette méthode:

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

Agréable!

Puis-je suggérer qu'au lieu d'une fonction privée, pourquoi ne pas créer un tube pour
fais ça. Cela aurait l'air beaucoup plus joli et portable.

Pas plus de travail non plus.

Je pourrais vous donner un exemple si vous en voulez un :-)

Le 1er avril 2017 à 02h12, Austin LaRue [email protected] a écrit:

Je viens de tomber dessus et j'ai pensé partager mon travail au cas où
quelqu'un d'autre s'y heurte.

Dans mon fichier ts, j'ai ajouté une méthode simple pour convertir une chaîne en nombre:

private convertStringToNumber (valeur: chaîne): nombre {
return + valeur;
}

Ensuite, dans le html, je passe simplement le lat / long à cette méthode:

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

-
Vous recevez ceci parce que vous êtes abonné à ce fil de discussion.
Répondez directement à cet e-mail, affichez-le sur GitHub
https://github.com/SebastianM/angular2-google-maps/issues/330#issuecomment-290757110 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/AY4FmON0vwkqtvbC3qlBK1E6SQQQsAr2ks5rrSXggaJpZM4IaCkp
.

Wow, je me battais la tête contre cela pendant plus d'une heure avant de trouver ce problème. Cela a parfaitement fonctionné pour moi :)

En général, mon expérience est que si les marqueurs agm sont visibles dans DOM mais non affichés, vous avez probablement fourni un type d'objet incorrect à ngFor d'une manière ou d'une autre (soit un type incorrect comme type Number mentionné ci-dessus, soit quelque chose ne contenant pas du tout lat et long qui était mon cas). Vérifiez ce que vous envoyez au tableau de marqueurs.

Je voudrais rouvrir ce numéro à nouveau.
J'essaie d'afficher des marqueurs prédéfinis, ainsi que de générer des marqueurs à l'écran si l'utilisateur clique sur un point de la carte, mais en utilisant ngfor, les marqueurs ne s'affichent pas sur la carte.
Dans mon fichier HTML, j'ai

<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>

et pour ajouter et afficher les marqueurs dans mon fichier service.ts, j'ai

  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))
  }

Moi aussi, j'enregistrais les valeurs lat et long tant qu'objets string , donc j'ai dû utiliser DecimalPipe comme ceci:

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

Doc officiel: https://angular.io/api/common/DecimalPipe