Question

我正在寻找使用我的Ionic 2 / Angular 2应用程序实现GoogleMap.OnInfoWindowClickListener的语法。我想重定向到一个新页面，即当用户点击谷歌地图内的信息窗口时，将新页面推送到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));

不幸的是，信息窗口内容中的函数调用失去了对这个＆＃39;这个＆＃39;这会导致错误。任何帮助表示赞赏！

Answer 1

这可能很笨重，但似乎有用......发布整个方法供参考。大部分代码都基于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);
    }); 
  }

如果有人有更简单的方法，请随意发表评论。

Answer 2

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

在Ionic 2中实现GoogleMap.OnInfoWindowClickListener

2 个答案: