Angular-google-maps: Afficher la couche de trafic

Créé le 16 mai 2018  ·  4Commentaires  ·  Source: SebastianM/angular-google-maps

Comment puis-je afficher la couche de trafic dans AGM MAP angular2.

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

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

Tous les 4 commentaires

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!

Cette page vous a été utile?
0 / 5 - 0 notes