Внедрить GoogleMap.OnInfoWindowClickListener в Ionic 2

Question

Я ищу синтаксис для реализации GoogleMap.OnInfoWindowClickListener с моим приложением Ionic 2/Angular 2. Я хотел бы перенаправить на новую страницу, то есть нажать новую страницу в стек на NavController, когда пользователь нажимает на информационное окно внутри карт google.

я смог настроить маркеры, используя следующий код:

//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

Это может быть неудобно, но, похоже, это работает ... Изложенный метод для справки. Большая часть кода основана на примере, предоставленном Джошем Морони ()

Это позволяет мне вызвать функцию, локально проходящую в местоположении, связанном с информационным окном. Содержимое 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); 
    }); 
    } 

Не стесняйтесь, если у кого есть более простой способ.