Angular-google-maps: Não carrega sebm-google-map-marker com * ngFor | assíncrono

Por favor, alguma atualização sobre o problema acima?

hey @ krunal039 - você pode verificar se <sebm-google-map-marker> estão no DOM após o término da operação assíncrona? Obrigado!

Oi Sebastian, acabei de atualizar meu angular2 para o mais recente e ele resolveu o problema não tenho certeza se era meu código incorreto ou algo com angular. mas está consertado. há também opções para definir o zoom automático com base em todos os marcadores?

@ krunal039 não, não é possível agora - desculpe. por favor, abra um novo problema para isso se você precisar disso. para que possamos discutir os detalhes da API. obrigado!

@SebastianM
Eu gostaria de reabrir este problema. Estou usando o angular2 rc.4 (versão mais recente do angular2 até agora) e enfrentando esse problema. Os marcadores estão sendo carregados no DOM, mas não aparecem na tela 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 é um array de objetos, cada objeto tendo parâmetros de latitude e longitude. centers é carregado de forma assíncrona por meio de um serviço. Outros elementos html usando *ngFor com centros no modelo estão funcionando corretamente. Os marcadores para cada objeto central são criados no DOM com a latitude e longitude corretas, mas por algum motivo eles não estão aparecendo no mapa.

Estou enfrentando o mesmo problema ao usar o angular.rc4.
Além disso, se eu redimensionar o navegador manualmente, o mapa aparece para mim.

@SebastionM Estou tendo o mesmo problema no rc4. Os marcadores não estão aparecendo no mapa. Os marcadores estão aparecendo no dom embora

mesmo problema aqui. alguma solução?

mesmo problema aqui também. no angular rc3

Finalmente descubra.
No meu cenário, eu estava recebendo dados do Http Service que vinham em JSON. Eu estava vinculando os campos lat e lng desses dados em um loop for. Não estava funcionando. Os marcadores estavam sendo criados no DOM, mas não exibidos na tela.

Foi assim que descobri:

1. Criou uma interface chamada marcador:
   marcador de interface {
   lat: número;
   lng: número;
   rótulo ?: string;
   arrastável: booleano;
   }
2. Quando meus dados se tornam observáveis ​​no método subscribe, chamo outro método pushMarker () quando os dados são completamente buscados:

this.observable = this.gisDataService.getEntities (dcode);
this.observable.subscribe (
dados => this.data = data.map ((entidade: Entidade) => nova Entidade (entidade.uid, entidade.alpha, entidade.lat, entidade.lng, entidade.tipo, entidade.tag, entidade.addr, entidade .desc, entity.zcode, entity.rcode, entity.dcode)),
erro => alerta (erro),
() => this.pushMarkers () // aqui é onde eu chamo a função ao terminar
);

1. Em seguida, fiz um loop em meus dados e empurrei-os na matriz de marcadores:

this.data.forEach (element => {
this.markers.push ({
lat: Número (element.lat),
lng: Number (element.lng),
rótulo: element.tag,
arrastável: falso
})
console.log ("empurrado" + element.lat + "," + element.lng);
});

Observação: descobri que, quando os dados são recebidos em JSON, eles não são convertidos em número, mesmo que você mapeie JSON para uma classe (como eu fiz). Mas, no momento do Pushing (na função pushMarker (), você deve converter explicitamente lat / lng em Number ().

Espero que ajude.

@nileshmahant Super! Eu precisava converter explicitamente para Number (). Obrigada :)

Obrigado @nileshmahant resolveu meu problema!

Eu gostaria de reabrir este aqui, para obter a conversão no componente, ao invés de ter que alimentá-lo com o valor convertido

1 para mim, demorei um pouco para descobrir e o caso de uso para carregar marcadores de JSON é bastante lógico

Acabei de me deparar com isso e pensei em compartilhar meu trabalho, caso alguém mais se depare com ele.

Em meu arquivo ts, adicionei um método simples para converter uma string em um número:

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

Então, no html, eu apenas passo a latitude / longitude para este método:

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

Legal!

Posso sugerir que, em vez de uma função privada, por que não criar um canal para
fazem isto. Seria muito mais bonito e portátil.

Também não há muito mais trabalho.

Eu poderia dar um exemplo, se você quiser :-)

Em 1 de abril de 2017 às 02:12, Austin LaRue [email protected] escreveu:

Acabei de me deparar com isso e pensei em compartilhar meu trabalho no caso
qualquer outra pessoa corre para ele.

Em meu arquivo ts, adicionei um método simples para converter uma string em um número:

private convertStringToNumber (valor: string): número {
retorno + valor;
}

Então, no html, eu apenas passo a latitude / longitude para este método:

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

-
Você está recebendo isto porque está inscrito neste tópico.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/SebastianM/angular2-google-maps/issues/330#issuecomment-290757110 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/AY4FmON0vwkqtvbC3qlBK1E6SQQQsAr2ks5rrSXggaJpZM4IaCkp
.

Uau, eu estava batendo minha cabeça contra isso por mais de uma hora antes de encontrar esse problema. Isso funcionou perfeitamente para mim :)

Em geral, minha experiência é que se agm-markers estiverem visíveis no DOM, mas não forem mostrados, você provavelmente forneceu um tipo de objeto errado para ngFor de alguma forma (seja um tipo impróprio como o tipo Number mencionado acima ou algo que não contém lat e long que foi o meu caso). Verifique novamente o que você está enviando para a matriz de marcadores.

Eu gostaria de reabrir este problema novamente.
Estou tentando exibir marcadores predefinidos, bem como gerar marcadores na tela se o usuário clicar em um ponto no mapa, mas usando o ngfor, os marcadores não são exibidos no mapa.
No meu arquivo HTML, eu tenho

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

e para adicionar e exibir os marcadores em meu arquivo service.ts, eu tenho

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

Eu também estava salvando os valores lat e long como string objetos, então tive que usar DecimalPipe embutidos assim:

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

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