IONIC 2 Google地图标记点击事件 [英] IONIC 2 Google Maps Marker Click Event

问题描述

我试图用这段代码从数据库中获取所有标记。但问题是当我点击标记时，我总是从数据库中获取最后一项。当alert（record.id）;弹出它总是显示每个标记的最后一项。我想在点击它们时显示每个标记的ID。

  loadMarker（）{
 this.service。 getMaps（）
 .subscribe（data1 => {
 let loc = data1; 
 for（var i = 0; i< data1.length; i ++）{
 var记录= DATA1 [I]; 
让经纬度=新GoogleMapsLatLng（record.lat，record.lng）; 
让的MarkerOptions：GoogleMapsMarkerOptions = {
 '位置'：经纬度，
 'title'：record.title，
'animation'：GoogleMapsAnimation.DROP 
}; 
 
 
 this.map.addMarker（markerOptions）.then（（marker ：GoogleMapsMarker）=> {
 marker.addEventListener（GoogleMapsEvent.MARKER_CLICK）
 .subscribe（（）=> {
警报（record.id）; 
}）; 
}）; 
} 
  

解决方案

订阅事件是异步的。你不会得到record.id fr om for循环
但是您可以在订阅中访问markerOptions数据。

在这里检查

  this.map.addMarker （（marker：GoogleMapsMarker）=> {
 marker.addEventListener（GoogleMapsEvent.MARKER_CLICK）
 .subscribe（e => {
 alert（e.get（'title'））; 
 let rec = data1。 （v => v.title == e.get（'title'））; 
 alert（rec [0] .id）; 
}）; 
}）; 
  

在这里

I'm trying to get all the markers from the database with this code. But the problem is when I click the marker I always get the last item from the database. When the "alert(record.id);" pops up it always show the last item for every marker. I want to show the id of each marker when I click them.

loadMarker(){
this.service.getMaps()
      .subscribe( data1 => {
        let loc = data1;
             for (var i = 0; i < data1.length; i++) {
                 var record = data1[i];
        let latlng = new GoogleMapsLatLng(record.lat, record.lng);
        let markerOptions: GoogleMapsMarkerOptions = {
        'position': latlng,
        'title': record.title,
        'animation': GoogleMapsAnimation.DROP
        };


        this.map.addMarker(markerOptions).then((marker: GoogleMapsMarker) => {
         marker.addEventListener(GoogleMapsEvent.MARKER_CLICK)
        .subscribe(() => {
          alert(record.id);
               });
          });       
}

解决方案

Subscribe event is asynchronous.You will not get record.id from the for loop. But you can access markerOptions data in subscribe.

Check here

    this.map.addMarker(markerOptions).then((marker: GoogleMapsMarker) => {
             marker.addEventListener(GoogleMapsEvent.MARKER_CLICK)
            .subscribe(e => {
              alert(e.get('title'));
let rec = data1.filter(v=>v.title==e.get('title'));
alert(rec[0].id);
                   });
              });

And here

这篇关于IONIC 2 Google地图标记点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！