Angular-google-maps: Mostrar camada de tráfego

Criado em 16 mai. 2018  ·  4Comentários  ·  Fonte: SebastianM/angular-google-maps

Como posso mostrar a camada de tráfego no AGM MAP angular2.

Comentários muito úteis

É possível adicioná-lo por meio do objeto google.maps.map subjacente. Para obter o objeto real do Google Maps, você precisa usar o evento mapReady . Então, no código que lida com isso, você pode adicionar a camada de tráfego. O "evento" do mapReady é a instância real do Google Maps.

HTML
<agm-map (mapReady)="onMapReady($event)" ... plus any other attributes ...> ... </agm-map>

TypeScript

onMapReady(mapInstance) {
    let trafficLayer = new google.maps.TrafficLayer();
    trafficLayer.setMap(mapInstance);
}

Você precisará importar a definição de tipos do Google Maps para evitar erros de Typescript:
import {} from '@types/googlemaps';
Que você pode instalar via:
npm install --save @types/googlemaps

Todos 4 comentários

É possível adicioná-lo por meio do objeto google.maps.map subjacente. Para obter o objeto real do Google Maps, você precisa usar o evento mapReady . Então, no código que lida com isso, você pode adicionar a camada de tráfego. O "evento" do mapReady é a instância real do Google Maps.

HTML
<agm-map (mapReady)="onMapReady($event)" ... plus any other attributes ...> ... </agm-map>

TypeScript

onMapReady(mapInstance) {
    let trafficLayer = new google.maps.TrafficLayer();
    trafficLayer.setMap(mapInstance);
}

Você precisará importar a definição de tipos do Google Maps para evitar erros de Typescript:
import {} from '@types/googlemaps';
Que você pode instalar via:
npm install --save @types/googlemaps

Super! Obrigado ziftytodd.

Para mim, o objeto google estava indefinido no meu projeto baseado em angular-cli, então eu tive que referenciar explicitamente window.google.maps.TrafficLayer()

@ziftytodd Obrigado pela sua solução. Foi realmente útil para mim.

Embora eu tenha que fazer alguns ajustes que também podem ser úteis para os outros.

1 - npm install --save @types/googlemaps
2 - crie um arquivo index.d.ts no caminho principal e escreva: declare module 'googlemaps';
3 - importe no seu texto datilografado: import {} from 'googlemaps';
4 - no seu arquivo HTML: <agm-map (mapReady)="onMapReady($event)" ... plus any other attributes ...> ... </agm-map>
5 - em seu texto datilografado:

onMapReady($event) {
let trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap($event);
}

Espero que ajude!

Esta página foi útil?
0 / 5 - 0 avaliações