Comment puis-je afficher la couche de trafic dans AGM MAP angular2.
C'est possible en l'ajoutant via l'objet google.maps.map sous-jacent. Pour obtenir l'objet Google Maps réel, vous devez utiliser l'événement mapReady
. Ensuite, dans le code qui gère cela, vous pouvez ajouter la couche de trafic. L '"événement" de mapReady est l'instance réelle de Google Maps.
HTML
<agm-map (mapReady)="onMapReady($event)" ... plus any other attributes ...> ... </agm-map>
Manuscrit
onMapReady(mapInstance) {
let trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(mapInstance);
}
Vous devrez importer la définition des types Google Maps pour éviter toute erreur Typescript :
import {} from '@types/googlemaps';
Que vous pouvez installer via :
npm install --save @types/googlemaps
Super! Merci ziftytodd.
Pour moi, l'objet google
n'était pas défini dans mon projet basé sur angular-cli, j'ai donc dû faire explicitement référence à window.google.maps.TrafficLayer()
@ziftytodd Merci pour votre solution. C'était vraiment utile pour moi.
Bien que j'ai dû faire quelques ajustements qui peuvent également être utiles à d'autres.
1 - npm install --save @types/googlemaps
2 - créez un fichier index.d.ts dans le chemin principal et écrivez : declare module 'googlemaps';
3 - importez dans votre tapuscrit : import {} from 'googlemaps';
4 - dans votre fichier HTML : <agm-map (mapReady)="onMapReady($event)" ... plus any other attributes ...> ... </agm-map>
5 - dans votre tapuscrit :
onMapReady($event) {
let trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap($event);
}
J'espère que ça aide!
Commentaire le plus utile
C'est possible en l'ajoutant via l'objet google.maps.map sous-jacent. Pour obtenir l'objet Google Maps réel, vous devez utiliser l'événement
mapReady
. Ensuite, dans le code qui gère cela, vous pouvez ajouter la couche de trafic. L '"événement" de mapReady est l'instance réelle de Google Maps.HTML
<agm-map (mapReady)="onMapReady($event)" ... plus any other attributes ...> ... </agm-map>
Manuscrit
Vous devrez importer la définition des types Google Maps pour éviter toute erreur Typescript :
import {} from '@types/googlemaps';
Que vous pouvez installer via :
npm install --save @types/googlemaps