Angular-google-maps: Mostrar capa de tráfico

Creado en 16 may. 2018  ·  4Comentarios  ·  Fuente: SebastianM/angular-google-maps

¿Cómo puedo mostrar la capa de tráfico en AGM MAP angular2.

Comentario más útil

Es posible agregándolo a través del objeto google.maps.map subyacente. Para obtener el objeto real de Google Maps, debe usar el evento mapReady . Luego, en el código que maneja eso, puede agregar la capa de tráfico. El "evento" de mapReady es la instancia real de Google Maps.

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

Mecanografiado

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

Deberá importar la definición de tipos de Google Maps para evitar errores de mecanografiado:
import {} from '@types/googlemaps';
Que puedes instalar a través de:
npm install --save @types/googlemaps

Todos 4 comentarios

Es posible agregándolo a través del objeto google.maps.map subyacente. Para obtener el objeto real de Google Maps, debe usar el evento mapReady . Luego, en el código que maneja eso, puede agregar la capa de tráfico. El "evento" de mapReady es la instancia real de Google Maps.

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

Mecanografiado

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

Deberá importar la definición de tipos de Google Maps para evitar errores de mecanografiado:
import {} from '@types/googlemaps';
Que puedes instalar a través de:
npm install --save @types/googlemaps

¡Súper! Gracias ziftytodd.

Para mí, el objeto google no estaba definido en mi proyecto basado en angular-cli, por lo que tuve que hacer referencia explícita a window.google.maps.TrafficLayer()

@ziftytodd Gracias por su solución. Fue realmente útil para mí.

Aunque tuve que hacer algunos ajustes que también pueden ser útiles para otros.

1 - npm install --save @types/googlemaps
2 - crea un archivo index.d.ts en la ruta principal y escribe: declare module 'googlemaps';
3 - importar en su mecanografiado: import {} from 'googlemaps';
4 - en su archivo HTML: <agm-map (mapReady)="onMapReady($event)" ... plus any other attributes ...> ... </agm-map>
5 - en su texto mecanografiado:

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

¡Espero eso ayude!

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

petalyaa picture petalyaa  ·  22Comentarios

ramnes picture ramnes  ·  54Comentarios

agil-NUBBA picture agil-NUBBA  ·  34Comentarios

carl09 picture carl09  ·  35Comentarios

ssypi picture ssypi  ·  27Comentarios