如何在离子3中添加谷歌地图信息卡的滑块

Question

我对离子框架很新.我想在滑块表单中添加多个标记以及信息卡,就像附加的图像一样.我能够在地图中添加多个标记,但不知道如何添加将激活标记的信息滑块.对应于滑块.可以请任何关于如何使用它的提示.

我的eventmap.ts文件显示多个标记

export class EventMapPage {
    public userToken:any;
    public userPostData = {"api_token":""};
    public responseData:any;
    public dataSet:any;



    @ViewChild('map') mapRef:ElementRef;

  constructor(...) {
      this.getEvents().then(result=> {
          this.responseData = result;
          this.DisplayMap(this.responseData);
      });

  }

     //Get all the available events
    getEvents(){
        const data = localStorage.getItem('userToken');
        this.userPostData.api_token= data;
        return this.authService.postData(this.userPostData,'events');
    }

    //Initializing the map


  DisplayMap(data) {
this.geolocation.getCurrentPosition().then((resp) => {
   const location = new google.maps.LatLng(resp.coords.latitude,
     resp.coords.longitude);
   const options = {
     center:location,
     zoom:10,
     mapTypeControl: false,
     streetViewControl:false,
   };
     const map = new google.maps.Map(this.mapRef.nativeElement,options);
     //Loop the markers
       if(data != null){
         for(var i=0; i<data.length; i++){
           this.multipleMaker(parseFloat(data[i].lat),parseFloat(data[i].lon),map);
         }
       }
    }).catch((error) => {
      console.log('Error getting location', error);
    });

  }

  //Marker function
 multipleMaker(lat,lng,map) {
    return new google.maps.Marker({
        position:{lat:lat,lng:lng},
        map:map
    });
}


}

Answer 1

经过一番尝试和谷歌研究，我终于弄清楚了。

我提出的解决方案如下

在地图.html 中

<ion-content >
  <div #map id="map">
  </div>

  <div  class="slider-wraper">
    <ion-slides slidesPerView="1" (ionSlideDidChange)="slideChanged()">
      <ion-slide *ngFor="let item of responseData?.weekEvents">
        <ion-card tappable (click)="viewDetail(item.id)">
          <div class="event-image-holder search-list">
            <img src="http://localhost:8000/{{item.photo_url}}"/>
          </div>
          <ion-card-content>
            <div class="event-info">
              <div class="event-descp">
                <h2>{{item.title}}</h2>
                <p>
                  {{item.club.name}}
                </p>
                <p>
                  <strong>{{item.attendees.length}} are going</strong>
                </p>
              </div>
            </div>
          </ion-card-content>
        </ion-card>
      </ion-slide>
    </ion-slides>
  </div>
</ion-content>

在map.ts中

第一个导入滑块

import { Slides } from 'ionic-angular';

然后在类内部获取滑块的引用

@ViewChild(Slides) slides: Slides;

然后添加这个方法

slideChanged() {
    let currentIndex = this.slides.getActiveIndex();
    let currentEvent  =this.responseData.weekEvents[currentIndex];
    this.map.setCenter({lat: parseFloat(currentEvent.lat),lng:parseFloat(currentEvent.lon)});
}

这将使当前滑块的标记成为地图的中心

现在剩下要做的唯一一件事就是单击标记以使滑块处于活动状态。完成后我会在这里更新。:))