Ionic 2 - Google Maps Native:标记点击事件未触发

时间:2017-11-15 18:52:25

标签: google-maps cordova ionic2

我正在使用Ionic 2和google maps cordova plugin

" cordova-plugin-googlemaps":" ^ 2.0.11"

我无法解雇这个听众。

标记已添加到地图中,但点击事件不会触发警报。

感谢您的帮助!

    let latlng = new LatLng(spot.lat, spot.long);
    let markerOptions: MarkerOptions = {
        'position': latlng,
        'animation': 'drop'
      };


      this.map.addMarker(markerOptions).then((marker: Marker) => {
        marker.addEventListener(GoogleMapsEvent.MARKER_CLICK).subscribe(e => {
          alert('foo');
        });
      });

其他信息

@ionic-native/core: 'version': 3.7.0

@ionic-native/google-maps: 'version': '4.3.0'

import { GoogleMaps, GoogleMap, GoogleMapsEvent, GoogleMapOptions, CameraPosition, MarkerOptions, LatLng, Marker } from '@ionic-native/google-maps';

我循环遍历多个lat long坐标并将它们添加到地图中。事件永远不会被解雇。

当我尝试将偶数附加到其中一个标记时,它也不起作用。

最后,如果我发出另一个警报,它就不会发射。添加标记承诺是否可能无法解决?

this.map.addMarker(markerOptions).then((marker: Marker) => {
   alert('in here'); 
 marker.addEventListener(GoogleMapsEvent.MARKER_CLICK).subscribe(e => {
   alert('foo');
 });
});

enter image description here

2 个答案:

答案 0 :(得分:2)

你应该试试这个。它对我来说很好用

marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe((latLng: LatLng) => {
    // do something
});

答案 1 :(得分:0)

您需要使用@ionic-native/core@4.4.0@ionic-native/google-maps@4.4.0。 至少@ionic-native/core@3.7.0太旧了。

$> npm uninstall @ionic-native/core @ionic-native/google-maps
$> cordova plugin rm cordova-plugin-googlemaps

$> npm install @ionic-native/core@latest @ionic-native/googlemaps@latest
$> cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="..." --variable API_KEY_FOR_IOS="..." --no-fetch

@ionic-native/google-maps@4.4.0开始,创建地图的方式发生了变化。

export class HomePage {

  map: GoogleMap;

  constructor() {  // <-- no longer need to define in constructor
  }

  ionViewDidLoad() {
    this.loadMap();
  }

  loadMap() {
    this.map = GoogleMaps.create('map_canvas');  // <-- changed
    this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
      ...
    });
  }
}