如何在 IONIC2 中添加标记点击监听器？答案

【问题标题】：How to add marker click listener in IONIC2?如何在 IONIC2 中添加标记点击监听器？
【发布时间】：2016-12-07 07:26:58
【问题描述】：

我正在使用 IONIC2，我已经实现了地图并在地图上放置了标记。我可以获取地图点击侦听器，但无法获取标记点击侦听器。

我也尝试过 addlistener 但无法获取标记的点击事件。

这是我在地图上添加标记的代码：

addMarkerOnMap(latLng1: GoogleMapsLatLng, depotsEntity: DepotsEntity) {
/**
 * To add marker in the map, need to initialize GoogleMapsMarkerOptions
 */
let options: GoogleMapsMarkerOptions = {
  icon: "www/img/location.png",
  title: depotsEntity.address,
  position: latLng1,
  animation: GoogleMapsAnimation.DROP
};
let marker = this.map.addMarker(options)
this.map.on(this.map.markerClicked, function () {
  console.log("markerClicked"); // This is not working yet

});

如果有人知道 IONIC2 中的标记点击监听器，请帮助我。

【问题讨论】：

标签： javascript google-maps typescript ionic-framework ionic2

【解决方案1】：

查看您的代码，我假设您使用的是cordova-plugin-googlemaps。

您做错了几件事。第一个是map.addMarker() 不返回标记，而是返回一个带有GoogleMapsMarker 类型值的承诺，这使得该行不正确

let marker = this.map.addMarker(options)

其次，您将事件处理程序附加到标记对象而不是地图，这意味着该位也是错误的

this.map.on(this.map.markerClicked, function () { });

你需要做的是调用this.map.addMarker()，等到promise被解决，然后将click handler添加到promise返回的标记中。

示例

this.map.addMarker(options).then((marker: GoogleMapsMarker) => {
        marker.addEventListener(GoogleMapsEvent.MARKER_CLICK).subscribe(() => { console.log('Marker clicked...'); });
});

您需要确保 GoogleMapsMarker 和 GoogleMapsEvent 已从 ionic-native 导入。

注意

在撰写本文时，我从理论上向您展示了如何实现您想要的，但目前这可能会给您以下错误

this._next 不是函数

这是一个已知问题，据我所知，它发生在您必须订阅的任何地图/标记事件上。可以在 Ionic Native GitHub 页面 #206 上跟踪该问题。

【讨论】：