Angular-google-maps: No carga sebm-google-map-marker con * ngFor | asincrónico

¿Alguna actualización sobre el problema anterior?

hey @ krunal039 - ¿puedes comprobar si los <sebm-google-map-marker> están en el DOM después de que finalice la operación asíncrona? ¡Gracias!

Hola Sebastian, acabo de actualizar mi angular2 a la última versión y ha resuelto el problema, no estoy seguro de que sea mi código incorrecto o algo con angular. pero está arreglado. ¿Hay también opciones para configurar el zoom automático en función de todos los marcadores?

@ krunal039 no, no es posible en este momento, lo siento. por favor abra un nuevo problema para esto si lo necesita. para que podamos discutir los detalles de la API. ¡Gracias!

@SebastianM
Me gustaría volver a abrir este problema. Estoy usando angular2 rc.4 (la versión más reciente de angular2 hasta ahora) y estoy enfrentando este problema. Los marcadores se están cargando en DOM pero no se muestran en el lienzo de mapas.

  <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 es una matriz de objetos, cada objeto tiene parámetros de latitud y longitud. centers se carga de forma asincrónica a través de un servicio. Otros elementos html que usan *ngFor con centros en la plantilla están funcionando correctamente. Los marcadores para cada objeto central se crean en el DOM con la latitud y longitud correctas, pero por alguna razón no se muestran en el mapa.

Estoy enfrentando el mismo problema usando angular.rc4.
Además, si cambio el tamaño del navegador manualmente, se me muestra el mapa.

@SebastionM Tengo el mismo problema en rc4. Los marcadores no aparecen en el mapa. Sin embargo, los marcadores se muestran en el dom.

mismo problema aquí. alguna solución?

mismo problema aquí también. en angular rc3

Finalmente descúbrelo.
En mi escenario, estaba obteniendo datos del servicio Http que venían en JSON. Estaba vinculando los campos lat y lng de esos datos en un bucle for. No estaba funcionando. Los marcadores se creaban en DOM pero no se mostraban en el lienzo.

Así es como lo descubrí:

1. Creó una interfaz llamada marcador:
   marcador de interfaz {
   lat: número;
   lng: número;
   etiqueta ?: cadena;
   arrastrable: booleano;
   }
2. Cuando mis datos se vuelven observables, luego en el método de suscripción, llamo a otro método pushMarker () cuando los datos se obtienen por completo:

this.observable = this.gisDataService.getEntities (dcode);
this.observable.subscribe (
data => this.data = data.map ((entidad: Entidad) => nueva Entidad (entidad.uid, entidad.alpha, entidad.lat, entidad.lng, entidad.tipo, entidad.tag, entidad.addr, entidad .desc, entity.zcode, entity.rcode, entity.dcode)),
error => alerta (error),
() => this.pushMarkers () // aquí es donde llamo a la función al finalizar
);

1. Luego hice un bucle en mis datos y los empujé a la matriz de marcadores:

this.data.forEach (element => {
this.markers.push ({
lat: Número (element.lat),
lng: Número (element.lng),
label: element.tag,
arrastrable: falso
})
console.log ("empujado" + element.lat + "," + element.lng);
});

Nota: Me di cuenta de que cuando se reciben datos en JSON, no se convierten en números, incluso si asigna JSON a una clase (como hice yo). Pero en el momento de Pushing (en la función pushMarker (), debe convertir explícitamente lat / lng en Number ().

Espero eso ayude.

@nileshmahant ¡Súper! Necesitaba convertir explícitamente a Number (). Gracias :)

¡Gracias @nileshmahant resolvió mi problema!

Me gustaría volver a abrir este, para obtener la conversión en el componente, en lugar de tener que alimentarlo con el valor convertido

+1 para mí, me tomó un tiempo resolver esto y el caso de uso para cargar marcadores desde JSON es bastante lógico

Me encontré con esto y pensé en compartir mi trabajo en caso de que alguien más lo encontrara.

En mi archivo ts agregué un método simple para convertir una cadena en un número:

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

Luego, en el html, simplemente paso lat / long a este método:

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

¡Lindo!

¿Puedo sugerir que en lugar de una función privada, por qué no crear una tubería para
hacer esto. Se vería mucho más agradable y portátil.

Además, no hay mucho más trabajo.

Podría dar un ejemplo si quiere uno :-)

El 1 de abril de 2017 a las 02:12, Austin LaRue [email protected] escribió:

Me encontré con esto y pensé en compartir mi trabajo en caso de
alguien más se topa con él.

En mi archivo ts agregué un método simple para convertir una cadena en un número:

convertStringToNumber privado (valor: cadena): número {
retorno + valor;
}

Luego, en el html, simplemente paso lat / long a este método:

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

-
Estás recibiendo esto porque estás suscrito a este hilo.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/SebastianM/angular2-google-maps/issues/330#issuecomment-290757110 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/AY4FmON0vwkqtvbC3qlBK1E6SQQQsAr2ks5rrSXggaJpZM4IaCkp
.

Wow, estuve golpeándome la cabeza contra esto durante más de una hora antes de encontrar este problema. Esto funcionó perfectamente para mí:)

En general, mi experiencia es que si los marcadores agm son visibles en DOM pero no se muestran, probablemente proporcionó un tipo de objeto incorrecto a ngFor de alguna manera (ya sea un tipo incorrecto como el tipo de Número mencionado anteriormente o algo que no contenga lat y long en absoluto que fue mi caso). Verifique lo que está enviando a la matriz de marcadores.

Me gustaría volver a abrir este problema.
Estoy tratando de mostrar marcadores predefinidos, así como generar marcadores en la pantalla si el usuario hace clic en un punto del mapa, pero al usar ngfor, los marcadores no se muestran en el mapa.
En mi archivo HTML, tengo

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

y para agregar y mostrar los marcadores en mi archivo service.ts, tengo

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

Yo también estaba guardando los valores lat y long como objetos string , así que tuve que usar construido en DecimalPipe así:

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

Documento oficial: https://angular.io/api/common/DecimalPipe