Angular-google-maps: 새 아이콘을 클릭하면 마커 정보 창을 닫으시겠습니까?

예, 이전에도 같은 문제가 발생했습니다.

다음은 작동하는 플렁크입니다.
http://plnkr.co/edit/cwuwBN?p=preview

나는이 접근법을 사용할 수 없었다.
내 솔루션은 소스를 다운로드하고 파일 (google-map-info-window.ts)에 다음 코드를 포함합니다.

// 아래의 최상위 파일에이 속성을 설정합니다. let infoWindowId = 0; (7 행)
let infoWindowLastContext : SebmGoogleMapInfoWindow = null;

open () : 약속{
if (infoWindowLastContext! == null) {
this._infoWindowManager.close (infoWindowLastContext)
}

infoWindowLastContext = this;

return this._infoWindowManager.open(this);

}

이게 도움이 되길 바란다...

내 템플릿 전용 솔루션 :

<sebm-google-map #gm [latitude]="lat" [longitude]="lng" [zoom]="zoom" [scrollwheel]="false" [styles]="mapStyles">
    <sebm-google-map-marker *ngFor="let place of places"
    [latitude]="place.point.lat"
    [longitude]="place.point.lng"
    [label]="place.name[0]"
    (markerClick)="gm.lastOpen?.close(); gm.lastOpen = infoWindow">
    <sebm-google-map-info-window #infoWindow>
        <strong>{{place.name}}</strong>
    </sebm-google-map-info-window>
</sebm-google-map-marker>

트윗 담아 가기

<agm-map #gm [latitude]="lat" [longitude]="lng" [zoom]="zoom" [scrollwheel]="false" [styles]="mapStyles">
    <sebm-google-map-marker *ngFor="let place of places"
    [latitude]="place.point.lat"
    [longitude]="place.point.lng"
    [label]="place.name[0]"
    (markerClick)="gm.lastOpen?.close(); gm.lastOpen = infoWindow">
    <agm-info-window #infoWindow>
        <strong>{{place.name}}</strong>
    </agm-info-window>
</agm-marker>

새로운 1.0.0-beta.0-green-zebra AOT가 작동하지 않습니다.
'AgmMap'유형에 'lastOpen'속성이 없습니다.

무슨 일이 일어날 수 있습니까?

잘 작동합니다. 내 템플릿 사용은에서와 같이 사용자 지정 클릭 기능을 호출합니다.

(markerClick)="gm.lastOpen?.close(); gm.lastOpen = infoWindow; markerClicked(m);"

안녕하세요,

@ Martin-B 솔루션을 사용해도 작동하지 않습니다.

도움이 필요하세요?

@ Martin-B는 솔루션에 감사드립니다. 치료 효과가 있습니다!

@ Martin-B 좋은 thx!
@melbouhy 부끄러워 나에게; 추가 깜빡 #infoWindow 에 <agm-info-window> . 당신도 같은 실수를했을까요?

공개 openIW (데이터 = 정의되지 않음) {
if (this.IW) {
this.IW.close ();
}

this.IW = data;

}

@ Martin-B 사용 방법 ((markerClick) = "gm.lastOpen? .close (); gm.lastOpen = infoWindow; markerClicked (m);") agm-marker에서 .ts 코드로 답장 해주세요

@menakav 다음은 작동하는 코드입니다.
.ts 파일 :
`
markerClicked (infoWindow) {
if (this.infoWindowOpened === infoWindow)
반환;

    if(this.infoWindowOpened !== null)
    {
        this.infoWindowOpened.close();
    }

    this.infoWindowOpened = infoWindow;
}

in .html file: (markerClick) = "gm.lastOpen? .close (); gm.lastOpen = infoWindow; markerClicked (m);"`

@menakav 귀하의 코드가 나를 위해 작동하지 않습니다.
:(

이 포럼의 모든 코드를 테스트했는데 내 문제는 여기에서받은 infoWindow .

  clickedMarker(infoWindow, index: number) {
    ...
  }

infoWindow 는 내가 어떤 포인트를 가지고 있더라도 항상 첫 번째입니다. 항상 _id = 0 인 infoWindow 를 받았습니다.

index 매개 변수는 클릭 된 마커의 실제 ID를받습니다 ....

이것은 내 HTML입니다.

<agm-marker *ngFor="let point of points; let i = index" [latitude]="point.latitude"
                            [longitude]="point.longitude"
                            [iconUrl]="iconUrl" (markerClick)="clickedMarker(infoWindow, i)">
<agm-info-window [disableAutoPan]="true" #infoWindow *ngIf="!isDetailMovil">
        <div class="marker__tittle">{{point.name}}</div>

항상 동일한 infoWindow가 나오는 이유는 무엇입니까?

@soyersoyer 의 "템플릿 전용"솔루션이 훌륭하게 작동합니다. 그러나 초기 agm-marker 배열이 새 마커 요소로 교체되면 (예 : ajax 업데이트 후) 갑자기 이전 정보 창이 더 이상 자동으로 닫히지 않습니다. 여기서 문제는 무엇일까요?

@markschmid 초기 agm-marker 배열이 교체 될 때의 해결 방법입니다.
(markerClick)="tmp=gm.lastOpen;gm.lastOpen=infoWindow;tmp?.close();"

@lauwrentius 답변을 기반으로 한 내 솔루션 :

* .html

<agm-marker 
    *ngFor="let marker of markers; let i = index"
    (markerClick)="showInfoWindow(infoWindow, i)"
>
    <agm-info-window #infoWindow></agm-info-window>
</agm-marker>

* .ts

infoWindowOpened = null;

filter() {
    infoWindowOpened = null;
    // redraw the map with filtered markers
}

showInfoWindow(infoWindow, index) {
    if (this.infoWindowOpened === infoWindow) {
        return;
    }

    if (this.infoWindowOpened !== null) {
        this.infoWindowOpened.close();
    }

    this.infoWindowOpened = infoWindow;   
}

안녕하세요.

오류로 'infoWindowOpened를 찾을 수 없음'을 표시하지 않고 filter(){infoWindowOpened = null;} 를 실행하는 방법을 설명 할 수 있습니까? 이것은 마커 아이콘 배열을 변경 한 후에 발생합니다.

나는 문제를 해결했다.
코드를 공유했습니다.
(markerClick) = "clickedMarker (infoWindow, point, point.latitude, point.longitude)">

clickedMarker (data = undefined, currentPoint : any, lat : string, lng : string) {
if (this.IW) {
this.IW.close ();
}
const 세부 정보 = data._infoWindowManager._infoWindows;
if (details.size> 0) {
details.forEach ((요소, 키) => {
if (key.hostMarker.latitude === lat && key.hostMarker.longitude === lng) {
this.IW = 키;
}
});
}
}

나는 그것이 도움이되기를 바랍니다.

감사합니다.

2018 년 4 월 28 일 토요일 02:04, Cristian Hernandez [email protected]
썼다 :

나는 문제를 해결했다.
코드를 공유했습니다.
[latitude] = "point.latitude"[longitude] = "point.longitude"
[iconUrl] = "iconUrl"(markerClick) = "clickedMarker (infoWindow, 포인트,
point.latitude, point.longitude) "> [disableAutoPan] = "true"* ngIf = "! isDetailMovil">

clickedMarker (data = undefined, currentPoint : any, lat : string, lng :
문자열) {if (this.IW) {this.IW.close (); } const 세부 사항 =
data._infoWindowManager._infoWindows; if (details.size> 0) {
details.forEach ((요소, 키) => {if (key.hostMarker.latitude === lat &&
key.hostMarker.longitude === lng) {this.IW = 키; }}); }}

나는 그것이 도움이되기를 바랍니다.

—
당신이 언급 되었기 때문에 이것을 받고 있습니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/SebastianM/angular-google-maps/issues/797#issuecomment-385086695 ,
또는 스레드 음소거
https://github.com/notifications/unsubscribe-auth/AgIM0TGCgyHK-snaJdIlSZSQuq0MF1Ihks5ts4DDgaJpZM4LQ0M7
.

여기 내 해결책이 있습니다. 각도 6과 함께 작동합니다.
HTML :

<agm-marker *ngFor="let marker of markers" [latitude]="marker.latitude"[longitude]="marker.longitude" (markerClick)="markerClick(infoWindow)">
<agm-info-window #infoWindow>
</agm-info-window>
</agm-marker>

TypeScript :

lastSelectedInfoWindow: any;
markerClick(infoWindow: any) {
        if (infoWindow == this.lastSelectedInfoWindow) {
            return;
        }
        if (this.lastSelectedInfoWindow != null) {
         try{
            this.lastSelectedInfoWindow.close();
          } catch {} //in case if you reload your markers
        }
        this.lastSelectedInfoWindow = infoWindow;
    }

오랜 연구와 불분명 한 솔루션 끝에 마침내 새로운 agm-info-window가 열릴 때 명확한 이전 agm-info-window에 대한 훌륭한 솔루션을 얻었습니다.

이것은 내 component.html입니다.

 <agm-map (mapClick)="close_window($event)" [fullscreenControl]='true' [mapTypeControl]='true' [latitude]="lat" [longitude]="lng" [zoom]="13" [scrollwheel]="false">
     <div *ngFor="let data of zonas">
        <agm-marker (markerClick)=select_marker(infoWindow) [latitude]="data.latitud" [longitude]="data.longitud">
           <agm-info-window #infoWindow >            
           </agm-info-window>
         </agm-marker>
      </div>
  </agm-map>

그리고 이것은 내 component.ts입니다.

constructor(public apiService: ApiService) {}
infoWindowOpened = null
previous_info_window = null
...
close_window(){
if (this.previous_info_window != null ) {
  this.previous_info_window.close()
  }    
}

select_marker(data,infoWindow){
 if (this.previous_info_window == null)
  this.previous_info_window = infoWindow;
 else{
  this.infoWindowOpened = infoWindow
  this.previous_info_window.close()
 }
 this.previous_info_window = infoWindow
}

따라서 새 창이 열릴 때마다 이벤트를 감지하고 이전 창을 닫습니다. 또한 사용자가지도의 다른 부분에서 창 외부를 클릭하면 열린 창을 닫는데도 작동합니다.

@JimmyTheNerd 감사

@lauwrentius 답변을 기반으로 한 내 솔루션 :

* .html

<agm-marker 
    *ngFor="let marker of markers; let i = index"
    (markerClick)="showInfoWindow(infoWindow, i)"
>
    <agm-info-window #infoWindow></agm-info-window>
</agm-marker>

* .ts

infoWindowOpened = null;

filter() {
    infoWindowOpened = null;
    // redraw the map with filtered markers
}

showInfoWindow(infoWindow, index) {
    if (this.infoWindowOpened === infoWindow) {
        return;
    }

    if (this.infoWindowOpened !== null) {
        this.infoWindowOpened.close();
    }

    this.infoWindowOpened = infoWindow;   
}

감사합니다 @JimmyTheNerd , 작동합니다.

이 문제는 최근 활동이 없었기 때문에 자동으로 오래된 것으로 표시되었습니다. 더 이상 활동이 발생하지 않으면 폐쇄됩니다. 귀하의 기여에 감사드립니다.