Como posso mostrar a camada de tráfego no AGM MAP angular2.
É 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!
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
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