Ionic 2에서 GoogleMap.OnInfoWindowClickListener 구현

Question

Ionic 2/Angular 2 앱으로 GoogleMap.OnInfoWindowClickListener를 구현하는 구문을 찾고 있습니다. 사용자가 Google지도 내부의 정보 창을 클릭하면 새 페이지로 리디렉션하고 싶습니다. 즉 NavController의 스택에 새 페이지를 푸시합니다.

나는 다음과 같은 코드를 사용하여 마커를 설정 할 수 있었다 :

//Creates the event listener for clicking the marker and places the marker on the map 
    google.maps.event.addListener(marker, 'click', (function(marker, markerCount) {  
     return function() {   
     infowindow.setContent(htmlMarkupForInfoWindow); 
     infowindow.open(this.map, marker); 
     } 
    })(marker, this.markerCount)); 

불행하게도,이 함수는 '이'오류가 발생하는 참조를 잃게 정보창의 콘텐츠 내에서 호출합니다. 어떤 도움을 주셔서 감사합니다!

Answer 1

내부 기능을 Arrow function으로 변경하면 this 기능을 사용할 수 있습니다.

//Creates the event listener for clicking the marker and places the marker on the map 
google.maps.event.addListener(marker, 'click', ((marker, markerCount) => {  
    return() => {   
    infowindow.setContent(htmlMarkupForInfoWindow); 
    infowindow.open(this.map, marker); 
    } 
})(marker, this.markerCount)); 

Answer 2

이것은 매우 어둡지 만 작동하는 것처럼 보입니다. 참조 용으로 전체 방법을 게시했습니다. 대부분의 코드는 Josh Morony (https://www.joshmorony.com/)가 제공 한 예제를 기반으로합니다.

이렇게하면 infoWindow와 연결된 위치에서 로컬로 전달되는 함수를 호출 할 수 있습니다. infoWindow의 내용은 div에 'content'클래스 이름으로 래핑됩니다.

addMarkerToMap(location, htmlMarkupForInfoWindow){ 
    var infowindow = new google.maps.InfoWindow(); 
    var myLatLng = new google.maps.LatLng(location.latitude, location.longitude); 
    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: this.map, 
     icon: this.mapIcon, 
     animation: google.maps.Animation.DROP, 
    }); 

    //Gives each marker an Id for the on click 
    this.markerCount++; 
    this.infoWindows.push(infowindow); 

    let self = this; 

    //Creates the event listener for clicking the marker and places the marker on the map 
    google.maps.event.addListener(marker, 'click', ((marker, markerCount) => {  
     return() => { 
     self.hideAllInfoWindows();  
     infowindow.setContent(htmlMarkupForInfoWindow); 
     infowindow.open(this.map, marker); 
     } 
    })(marker, this.markerCount));  

    // add listener that will capture the click event of the infoWindow 
    google.maps.event.addListener(infowindow, 'domready',() => { 
     document.getElementById('content').addEventListener('click',() => { 
     self.onLocationSelected(location); 
     }, false); 
    }); 
    } 

누구나 쉬운 방법이 있으면 언제든지 댓글을 남길 수 있습니다.