Angular-google-maps: ΠŸΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ слой Ρ‚Ρ€Π°Ρ„ΠΈΠΊΠ°

Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ Π½Π° 16 мая 2018  Β·  4ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ  Β·  Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: SebastianM/angular-google-maps

Как я ΠΌΠΎΠ³Ρƒ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ слой Ρ‚Ρ€Π°Ρ„ΠΈΠΊΠ° Π² 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

ВсС 4 ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π­Ρ‚ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π΅Π³ΠΎ Ρ‡Π΅Ρ€Π΅Π· Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ 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);
}

НадСюсь, ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚!

Π‘Ρ‹Π»Π° Π»ΠΈ эта страница ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ?
0 / 5 - 0 Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΈ