在Ionic 2中实现GoogleMap.OnInfoWindowClickListener

我正在寻找使用我的Ionic 2/Angular 2应用程序实现GoogleMap.OnInfoWindowClickListener的语法。我想重定向到新页面，即当用户单击Google地图内的信息窗口时，将新页面推送到NavController上的堆栈。在Ionic 2中实现GoogleMap.OnInfoWindowClickListener

我已经能够使用下面的代码来设置标记：

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

不幸的是，该函数的信息窗口里面的内容调用失去参考“这”导致的错误。任何帮助表示赞赏！

来源

2017-02-13 smedcalf

更改内部函数以使用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));

来源

2017-02-13 15:57:20

欣赏提示，但这并没有解决原来的问题。我正在寻找一个实现OnInfoWindowClickListener的例子，或者是任何信息窗口触发的事件。我引用的代码是为了表明我能够绑定到标记点击事件，但没有成功捕获某人单击打开的信息窗口。 – smedcalf

这可能是笨重的，但它似乎工作...张贴整个方法供参考。大部分代码基于Josh Morony提供的示例（https://www.joshmorony.com/）

这使我可以在与infoWindow关联的位置本地调用一个函数。 infoWindow的内容被封装在一个类名为“content”的div中。

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); 
    }); 
    }

如果有人有更简单的方法随意评论。

来源

2017-02-13 17:33:45 smedcalf

在Ionic 2中实现GoogleMap.OnInfoWindowClickListener

回答

相关问题