ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ
ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΠΌΠ°ΡΠΊΠ΅Ρ Ρ Π²ΠΈΠ΄ΠΈΠΌΡΠΌ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠΌ ΠΎΠΊΠ½ΠΎΠΌ - ΡΠΎΡΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΏΡΠΎΡΠ΅ΡΡΠΎΡΠ° Π΄ΠΎ 100% ΠΎΡ ΡΠ΄ΡΠ°. ΠΡΠΎΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΎ Π² Chrome.
Π¨Π°Π³ΠΈ ΠΏΠΎ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ
http://plnkr.co/edit/q0ttx1XbTCnB4DFujtRV?p=preview
ΠΠ΅ΠΉΡΡΠ²ΠΈΡ ΠΏΠΎ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΡ:
Π’Π΅ΠΊΡΡΠ΅Π΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅
ΠΠ°ΡΠΊΠ΅Ρ Ρ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠΌ ΠΎΠΊΠ½ΠΎΠΌ ΡΠΎ Π²ΡΠ΅ΠΌΠ΅Π½Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π²ΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΠΈ Π±ΠΎΠ»ΡΡΠ΅ Π¦Π
ΠΠΆΠΈΠ΄Π°Π΅ΠΌΠΎΠ΅ / ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅
ΠΠΎΡΡΠΎΡΠ½Π½Π°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ° Π¦Π
Π²Π΅ΡΡΠΈΡ angular2 ΠΈ angular2-google-maps
2.1.1 ΠΈ 0.16.0
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½Π°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ
Π΄Π°. Π― Π½Π°ΡΠ΅Π» ΡΡ ΠΆΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ.
Π Ρ ΡΠΎΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ angular2.
ΠΡΠΈΡΠΈΠ½Π° Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΏΡΠΈ ΠΎΡΠΊΡΡΡΠΈΠΈ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π° ΡΡΡΠ°Π½ΠΈΡΠ° Π±ΡΠ΄Π΅Ρ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΠ²Π°ΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ½ΠΎΠ²Π° ΠΈ ΡΠ½ΠΎΠ²Π°, ΠΊΠ°ΠΊ ΡΠΈΠΊΠ». Π’Π°ΠΊ ΡΡΠΎ ΡΡΡΠ°Π½ΠΈΡΠ° ΠΏΠ΅ΡΠ΅ΡΠΈΡΠΎΠ²ΡΠ²Π°Π»Π°ΡΡ ΡΠ½ΠΎΠ²Π° ΠΈ ΡΠ½ΠΎΠ²Π°. Π’ΠΎΡΠΎΠΏΠΈΡΡΡΡ. ΡΡΠΎ Π±ΠΎΠ»ΡΡΠ°Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°.
ΠΡΡΡ ΠΊΠ°ΠΊΠΈΠ΅-Π½ΠΈΠ±ΡΠ΄Ρ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ / ΠΏΡΠΎΠ³ΡΠ΅ΡΡ ΠΏΠΎ ΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ΅? @SebastianM
Π― Π½Π°ΡΠ΅Π» ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π·Π΄Π΅ΡΡ: https://github.com/angular/angular/issues/10883#issuecomment -240423378
ΠΡΠ°ΠΊ, Ρ Π²ΡΠ·Π²Π°Π» infoWindow.open () / close () Π²Π½Π΅ Angular, ΡΡΠΎΠ±Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΎΠ±Π½Π°ΡΡΠΆΠ΅Π½ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ:
map.component.html
<div *ngFor="let property of _properties">
<agm-marker [latitude]="property.Lat"
[longitude]="property.Lng"
[iconUrl]="_markerIconUrl"
(mouseOver)="_infoWindowOpen($event, infoWindow);"
(mouseOut)="_infoWindowClose($event, infoWindow);">
</agm-marker>
</div>
...
<agm-info-window #infoWindow>
</agm-info-window>
map.component.ts
import { Component, OnInit, NgZone } from '@angular/core';
...
constructor(private _zone: NgZone) {...}
...
private _infoWindowOpen(mouseEvent: any, infoWindow: any) {
infoWindow.hostMarker = mouseEvent.marker;
this._zone.runOutsideAngular(() => {
infoWindow.open();
});
}
...
private _infoWindowClose(mouseEvent: any, infoWindow: any) {
this._zone.runOutsideAngular(() => {
infoWindow.close();
});
}
ΠΡΠ° ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Π±ΡΠ»Π° Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠΎΠΌΠ΅ΡΠ΅Π½Π° ΠΊΠ°ΠΊ ΡΡΡΠ°ΡΠ΅Π²ΡΠ°Ρ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π² ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ Π²ΡΠ΅ΠΌΡ Π½Π΅ Π±ΡΠ»ΠΎ Π°ΠΊΡΠΈΠ²Π½ΠΎΡΡΠΈ. ΠΠ½ Π±ΡΠ΄Π΅Ρ Π·Π°ΠΊΡΡΡ, Π΅ΡΠ»ΠΈ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ Π±ΡΠ΄Π΅Ρ Π°ΠΊΡΠΈΠ²Π½ΠΎΡΡΠΈ. Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° Π²Π°Ρ Π²ΠΊΠ»Π°Π΄.
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
Π― Π½Π°ΡΠ΅Π» ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π·Π΄Π΅ΡΡ: https://github.com/angular/angular/issues/10883#issuecomment -240423378
ΠΡΠ°ΠΊ, Ρ Π²ΡΠ·Π²Π°Π» infoWindow.open () / close () Π²Π½Π΅ Angular, ΡΡΠΎΠ±Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΎΠ±Π½Π°ΡΡΠΆΠ΅Π½ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ:
map.component.html
map.component.ts