ΠΠ°ΠΊ Ρ ΠΌΠΎΠ³Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΡΠ»ΠΎΠΉ ΡΡΠ°ΡΠΈΠΊΠ° Π² AGM MAP angular2.
ΠΡΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π΅Π³ΠΎ ΡΠ΅ΡΠ΅Π· Π±Π°Π·ΠΎΠ²ΡΠΉ ΠΎΠ±ΡΠ΅ΠΊΡ google.maps.map. Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΎΠ±ΡΠ΅ΠΊΡ Google Maps, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΠ±ΡΡΠΈΠ΅ mapReady
. ΠΠ°ΡΠ΅ΠΌ Π² ΠΊΠΎΠ΄Π΅, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ ΡΡΠΎ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΠΎΠ²Π΅Π½Ρ ΡΡΠ°ΡΠΈΠΊΠ°. Β«Π‘ΠΎΠ±ΡΡΠΈΠ΅Β» mapReady β ΡΡΠΎ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡ ΠΊΠ°ΡΡΡ Google.
HTML
<agm-map (mapReady)="onMapReady($event)" ... plus any other attributes ...> ... </agm-map>
ΠΠ°ΡΠΈΠ½ΠΎΠΏΠΈΡΡ
onMapReady(mapInstance) {
let trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(mapInstance);
}
ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠΈΠΏΠΎΠ² Google Maps, ΡΡΠΎΠ±Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΎΡΠΈΠ±ΠΎΠΊ Typescript:
import {} from '@types/googlemaps';
ΠΠΎΡΠΎΡΡΠΉ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠ΅ΡΠ΅Π·:
npm install --save @types/googlemaps
Π‘ΡΠΏΠ΅Ρ! Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ ziftytodd.
ΠΠ»Ρ ΠΌΠ΅Π½Ρ ΠΎΠ±ΡΠ΅ΠΊΡ google
Π½Π΅ Π±ΡΠ» ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ Π² ΠΌΠΎΠ΅ΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ΅ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ angular-cli, ΠΏΠΎΡΡΠΎΠΌΡ ΠΌΠ½Π΅ ΠΏΡΠΈΡΠ»ΠΎΡΡ ΡΠ²Π½ΠΎ ΡΡΡΠ»Π°ΡΡΡΡ Π½Π° window.google.maps.TrafficLayer()
@ziftytodd Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° Π²Π°ΡΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅. ΠΡΠΎ Π±ΡΠ»ΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π΄Π»Ρ ΠΌΠ΅Π½Ρ.
Π₯ΠΎΡΡ ΠΌΠ½Π΅ ΠΏΡΠΈΡΠ»ΠΎΡΡ Π²Π½Π΅ΡΡΠΈ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΊΠΎΡΡΠ΅ΠΊΡΠΈΠ²Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΠΎΠ»Π΅Π·Π½Ρ Π΄ΡΡΠ³ΠΈΠΌ.
1 - npm install --save @types/googlemaps
2 - ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ°ΠΉΠ» index.d.ts Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΠΏΡΡΠΈ ΠΈ Π½Π°ΠΏΠΈΡΠ°ΡΡ: declare module 'googlemaps';
3 - ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Π² ΡΠ²ΠΎΠΉ ΠΌΠ°ΡΠΈΠ½ΠΎΠΏΠΈΡΠ½ΡΠΉ ΡΠ΅ΠΊΡΡ: import {} from 'googlemaps';
4 - Π² Π²Π°ΡΠ΅ΠΌ HTML-ΡΠ°ΠΉΠ»Π΅: <agm-map (mapReady)="onMapReady($event)" ... plus any other attributes ...> ... </agm-map>
5 - Π² Π²Π°ΡΠ΅ΠΌ ΠΌΠ°ΡΠΈΠ½ΠΎΠΏΠΈΡΠ½ΠΎΠΌ ΡΠ΅ΠΊΡΡΠ΅:
onMapReady($event) {
let trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap($event);
}
ΠΠ°Π΄Π΅ΡΡΡ, ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ!
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
ΠΡΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π΅Π³ΠΎ ΡΠ΅ΡΠ΅Π· Π±Π°Π·ΠΎΠ²ΡΠΉ ΠΎΠ±ΡΠ΅ΠΊΡ google.maps.map. Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΎΠ±ΡΠ΅ΠΊΡ Google Maps, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΠ±ΡΡΠΈΠ΅
mapReady
. ΠΠ°ΡΠ΅ΠΌ Π² ΠΊΠΎΠ΄Π΅, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ ΡΡΠΎ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΠΎΠ²Π΅Π½Ρ ΡΡΠ°ΡΠΈΠΊΠ°. Β«Π‘ΠΎΠ±ΡΡΠΈΠ΅Β» mapReady β ΡΡΠΎ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡ ΠΊΠ°ΡΡΡ Google.HTML
<agm-map (mapReady)="onMapReady($event)" ... plus any other attributes ...> ... </agm-map>
ΠΠ°ΡΠΈΠ½ΠΎΠΏΠΈΡΡ
ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠΈΠΏΠΎΠ² Google Maps, ΡΡΠΎΠ±Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΎΡΠΈΠ±ΠΎΠΊ Typescript:
import {} from '@types/googlemaps';
ΠΠΎΡΠΎΡΡΠΉ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠ΅ΡΠ΅Π·:
npm install --save @types/googlemaps