¿Cómo puedo mostrar la capa de tráfico en AGM MAP angular2.
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!
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
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